实例演示移动端布局原理

原理说明

标准屏 375px （iphone6 的dpi尺寸750 转换为逻辑尺寸375的来的）
通常设置100px =1rem 1rem = 100px = 375px/3.75
以上信息换算，可以理解为这样 375 / 100 = 3.75rem
3.75rem = 100vw
1rem = 100/3.75
通常我们把 html的font-size 设置为100vw/3.75 得出当前1rem = 26.66vw
如果我们把body的font-size 设置为0.16rem
100vw / 3.75 = 0.16rem 当前屏幕变大时，100vw 变大
0.16rem 也会变大。所以对应的尺寸也会发生变化

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>标准屏  375px  （iphone6 的dpi尺寸750 转换为逻辑尺寸375的来的）
通常设置100px =1rem   1rem = 100px = 375px/3.75 
以上信息换算，可以理解为这样  375  /  100  = 3.75rem 
 3.75rem = 100vw
  1rem = 100/3.75
通常我们把 html的font-size 设置为100vw/3.75  得出 当前1rem = 26.66vw
如果我们把body的font-size 设置为0.16rem
100vw   /  3.75  = 0.16rem    当前屏幕变大时 ，100vw 变大
0.16rem 也会变大。所以对应的尺寸也会发生变化  
</p>
<style>
    html{
font-size: 100px;
        font-size:calc(100vw / 3.75);
    }
    body {
        /* 将默认的16px,用rem表示  */
        font-size: 0.16rem;
      }
      @media (max-width:375) {
            /* 14/16  = 0.875px */
            /* 1rem  = 100 *0.875  = 87.5px */
            html{   
            font-size:87.5px;
            /* 设置1rem =87.5px 可保证最小字号14px ，保证用户始终看的清 */
            }            
        }
    /* 经过测试观察，当屏幕宽度>=470px 字号 约20px ，就不需要放大显示了 */
    @media(min-width:470px){
        html{
            /* font-size: 应该设置多少合适 */
            /* 1 默认1rem=100px。此时body中的font-size为16px */
            /* 16px -》1rem = 100px
             20px  -》 20/16   = 1.25 =  100*1.25  = 125px
             计算工程
             1i算出16px -> 20px  变化比例  20/16=1.25
                对应的rem应该扩大1.25    1000* 1.25 = 125px
              */
              font-size: 125px;
        }
    }
</style>
</body>
</html>

实例演示移动端布局原理

实例演示移动端布局原理

原理说明

代码如下

效果图如下

相关文章