实例演示移动端布局原理,并描述三大视口之间的换算关系与rem+vw布局的原理与流程

<!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>移动端布局原理</title>
  </head>
  <body>
    <div class="title">Hello World</div>
    <!-- 1、单位rem是相对于html根元素的字号值. 
    三个视口：
    1、布局视口:面向开发者，与设备无关默认是980px，用width表示
    2、视觉视口：与设备有关，用width-device表示
    3、理想视口：用视觉视口布局，width= width-device; -->
    <!-- 默认浏览器字号是16px，所以1rem=16px;
    视觉视口用100vw表示,所以1vw ,是根据每个设备的不同表示的像素也不一样
    如iphone6 ,375像素，1vw = 375/100 = 3.75px;
    DPI:设备像素比= 设备像素/css像素
    布局应该用css像素来布局 -->
    <!-- 设置1rem =100px;font-size:100px; 
    通常设计师给的设计稿, 为选择一个相对公认的通用宽度进行设计,一般用iPhone6的"375px"
     求不同设备之间的比例值为 100vw =375px; 1rem=100px; 375px/100px=3.75;
    通过3.75计算出： 
    iphone6/11: 100vw = 375px; 375px/3.75=100px; 100px =1rem; 
    iphone12/13: 100vw = 390px; 390px/3.75=104px; 104px = 1rem;
    iphone11max: 100vw = 414px; 414px/3.75=110.4px; 110.4px = 1rem; -->
    <style>
      html {
        font-size: calc(100vw / 3.75);
      }
      .title {
        font-size: 0.16rem;
      }
      @media (max-width: 375px) {
        /* 设置此时字体号为14px
        14/16=0.875
        100*0.875=87.5px; */
        html {
          font-size: 87.5px;
        }
      }
      @media (min-width: 470px) {
        /* 设置此时字体号为20px
        20/16=1.25
        100*1.25=125px; */
        html {
          font-size: 125px;
        }
      }
    </style>
  </body>
</html>

相关文章