rem单位

rem单位是相对于HTML标签的字号计算结果

1rem = 1HTML字号大小

使用rem单位设置网页元素的尺寸

rem移动适配 - 媒体查询-（能够使用媒体查询设置差异化CSS样式）

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式

当某个条件成立, 执行对应的CSS样式

写法：

  /* 1，以视口宽度为375px为例  我们使用媒体查询 */
  @media (width: 375.2px) {
    /* 设置html标签的字体大小 */
    html {
      font-size: 37.5px;
    }
  }

  /* 2.适配414宽度 的手机 */
  @media (width: 414.4px) {
    html {
      font-size: 41.4px;
    }
  }
  
   /* html字体大小设置为屏幕视口的 1/10  320px 375px 414px*/
  /* @media (width: 320px) {
    html {
      font-size: 32px;
    }
  }

  @media (width: 375.2px) {
    html {
      font-size: 37.5px;
    }
  }

  @media (width: 414.4px) {
    html {
      font-size: 41.4px;
    }
  } */

  /* 
  适配移动端过程：
   1.要利用媒体查询规定不同的屏幕宽度设置不同的根字号大小；屏幕宽度的1/10
   2.页面元素就可以使用rem相对单位，1rem=1html文字大小
  */

移动web 移动适配

rem单位