一、rem是什么

rem（font size of the root element）是指相对于根元素html的字体大小的单位。
如果html的font-size是16px
那么1rem = 16px

二、应用场景

多应用于移动端网页的适配（不同机型不同设备宽度）

三、如何进行rem适配

3.1、添加meta应对移动端适配

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 添加meta标签进行移动端适配（让html的宽度正好等于设备的宽度） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>移动端适配</title>
  </head>

3.2、动态获取当前设备宽度

<body>
    <script>
      // 定义一个函数获取当前设备的宽度
      function getWinSize() {
        let width = document.documentElement.clientWidth;
        console.log(width);
      }
      //进入页面默认获取一次
      getWinSize();
      //当页面窗口视图改变的时候再次执行，获取设备宽度
      window.onresize = getWinSize;
    </script>
  </body>

3.3、根据获取到的设备宽度，设置html的font-size为多少合适？

假设设计稿宽度是750px，我们获取到的设备宽度为width

那么有等式1：750px = width

那么有等式2：1px = width/750

假设我们想实现 1rem = 100px，根据等式二，得出
1rem = 100px = 100*(width/750)

最后给html的根元素设置字体大小值就为100*(width/750)

注意

这里的 1rem = 100px，好处是：

只需要根据设计稿给的px直接缩小100倍，改单位为rem即可

<script>
      // 定义一个函数获取当前设备的宽度
      function getWinSize() {
        let width = document.documentElement.clientWidth;
        // 假设设计稿宽度为750px
        // 假设已知根元素我们设置为100px（这里设置100方便后续我们好计算）
        // 动态设置根元素html的fontSize
        document.documentElement.style.fontSize =
          100 * (width / 750) + "px";
      }
      //进入页面默认获取一次
      getWinSize();
      //当页面窗口视图改变的时候再次执行
      window.onresize = getWinSize;
    </script>

3.4、如何使用（px到rem的转换）

如果设计稿给我们一个盒子宽是 350px 高是 400px
那么我们只要在数值的基础上缩小 100倍即可
宽是 3.5rem高是 4rem

四、优化

当我们做的移动端适配以后，这个网页仍然有可能在PC端打开，这时候我们就需要对body元素设置最大宽度和居中，来适配pc端

     * {
        padding: 0;
        margin: 0;
      }
      body {
        /* 750根据设计稿宽度设计 */
        max-width: 750px;
        /* 居中 */
        margin: 0 auto;
      }

四、进阶

4.1、封装一个phone.js文件，专门用于移动端适配

代码如下

(function (doc, win) {
  var docEL = document.documentElement,
    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
    recalc = function () {
      // 获取当前设备的宽度
      var clientWidth = docEL.clientWidth;
      if (!clientWidth) return;
      if (clientWidth >= 750) {
        //宽度大于750，根元素字体大小不能超过100px（不能大于设计稿的最大宽度）
        docEL.style.fontSize = "100px"; //设置根元素大小
      } else {
        docEL.style.fontSize = (clientWidth / 750) * 100 + "px";
      }
    };
  if (!doc.addEventListener) return;
  //添加窗口变动监听
  win.addEventListener(resizeEvt, recalc, false);
  //dom加载的时候执行一次
  doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

4.2、引入

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 添加meta标签进行移动端适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./phone.js"></script>

移动端适配方案rem（附适配封装的js文件）