• [移动端] “viewport“ content=“width=device-width, initial-scale=1.0“ 什么意思

    布局视口, 代码如下

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <title>Documenttitle>
    7.   <style>
    8.     body,
    9.     html {
    10.       margin: 0;
    11.       padding: 0;
    12.     }
    13.  
    14.     .box {
    15.       width: 200px;
    16.       height: 200px;
    17.       background-color: pink;
    18.     }
    19.   style>
    20. head>
    21.  
    22. <body>
    23.   <div class="box">div>
    24. body>
    25.  
    26. html>

    怎么换成移动端就这么小了呢?

    因为默认视口是980px,这个盒子相对980等比缩小就变成这样了

    那怎么办?加参数!!

    假如我的视口是400px

     

    就会得到以下情况

     没错,占了一半!!

    但是总不能写死这个宽度,为了让页面显示完整,可以让视口宽度等于设备宽度

     

    • width=device-width 表示网页的宽度应该等于设备的宽度，这样可以确保网页在不同设备上以正确的比例显示，不会出现水平滚动条。
    • initial-scale=1.0 表示网页的初始缩放比例为1.0，也就是默认大小，不进行缩放。

     如果你不想别人放大,你可以设置

     

    确保万一 ,最小最大值都设置1

     

     可参考京东

    如何自适应

    上面只是等比例放小而已,有没有根据不同屏幕大小来放大缩小

    方案一:百分比适配

    因为不同属性的百分比值相对的可能是不同参照物, 所以百分比在移动端适配中使用是非常少的;
     

    方案二:rem+动态的font-size值

    只要考虑2件事情

    问题一: 针对不同的屏幕，设置html不同的font-size
    问题二: 将原来要设置的尺寸，转化成rem单位

    媒体查询

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=00px, initial-scale=1.0,
    7.   user-scalable=no, maxmun-scale=1.0,minmun-scale=1.0">
    8.  
    9.   <title>Documenttitle>
    10.   <style>
    11.     @media screen and (max-width:320px) {
    12.       html {
    13.         font-size: 7px;
    14.       }
    15.     }
    16.  
    17.     @media screen and (min-width:375px) {
    18.       html {
    19.         font-size: 16px;
    20.       }
    21.     }
    22.  
    23.     @media screen and (min-width:426px) {
    24.       html {
    25.         font-size: 20px;
    26.       }
    27.     }
    28.  
    29.     body,
    30.     html {
    31.       margin: 0;
    32.       padding: 0;
    33.     }
    34.  
    35.     .box {
    36.       width: 15rem;
    37.       height: 15rem;
    38.       background-color: pink;
    39.     }
    40.   style>
    41. head>
    42.  
    43. <body>
    44.   <div class="box">div>
    45. body>
    46.  
    47. html>

     缺点如下

    1.我们需要针对不同的屏幕编写大量的媒体查询

    2,如果动态改变尺寸，不会实时的进行更新,而是大于某个范围才更新

    方案二

     

    1.     //获取html元素
    2.     let html = document.documentElement;
    3.     function setREM() {
    4.       //重新计算html-px值
    5.       const htmlFontSize = html.clientWidth / 10;
    6.       //重新赋值htmlpx值
    7.       html.style.fontSize = htmlFontSize + 'px'
    8.     }
    9.     //上来就初始化启动一次
    10.     setREM()
    11.     //监听大小重新启动
    12.     window.addEventListener('resize', setREM)

     方案三:github库

    https://github.com/amfe/lib-flexible/tree/2.0

    方案二:vw

    方案四:flex

  • 相关阅读:
    Leetcode刷题Day5休息 & Day6----------哈希表
    基于 JMeter API 开发性能测试平台
    计算机组成原理第三章 13 主存芯片的构成 主存和CPU之间的连接 字扩展和位扩展 $\color{red}{2^n}$
    ceres 损失函数loss_function小结
    Redis的基础与django使用redis
    测一测现在的温度
    Redis学习
    浅谈C++重载、重写、重定义
    sklearn【MAPE】平均相对误差介绍，以及案例学习！
    Linux 常用运维使用指令
  • 原文地址：https://blog.csdn.net/Madman528/article/details/138163018