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

2023-03-29 本文已影响0人扶得一人醉如苏沐晨

一、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为多少合适？

看下面的比例关系

image.png

未知变量我们设为x

x =（设备宽度/设计稿宽度）* 现有根元素大小（假设100px好计算）

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

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

拿出上面的关系式

image.png

设备变大了，我们动态设置的fontSize也会变大，
设备变小了，我们动态设置的fontSize也会变小，
关系式相等，左侧分母/右侧分母 = 左侧分子/右侧分子 = 一个恒等比例
得出结论
页面的rem值 = 页面的像素值 / 根元素的fontSize
设计稿750px像素值对应的rem = 750/100 = 375/50 = 7.5rem（100倍缩小）

如果设计稿给我们一个盒子宽是 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>