通过 rem 适配移动端设备不同的界面大小

手机屏幕的分辨率种类是远远大于 PC 端的, 所以原本的那种通过媒体查询来切换元素大小的方式就没那么灵活了, 我们更希望能让页面在不同的分辨率下都保持同样的大小、间距、风格

rem 是html这个元素的font-size属性值的大小, 如果 font-size=12px, 那么 1rem=12px, 通过 rem 对应的字体大小变化能实现页面的元素能按照设计稿相对于设备分辨率的比例来等比例缩放

页面动态的修改字体大小的方式: 在根 html 文件里加入以下的这段 IIFE 函数

<script>
  // 动态控制rem值实现响应式布局
  new (function () {
    let windowWidth = 0;
    const designWidth = 750; // 设计稿是750px宽度,1624px高度
    const baseFontSize = 75; // 自定义基础字体大小75px
    let baseZoomRate = 1; // 缩放比例
    const changeZoomRate = () => {
      windowWidth = document.getElementsByTagName("html")[0].offsetWidth;
      if (windowWidth > designWidth) {
        // 设备宽度比设计稿更大, 需要放大字体来适应设备
        baseZoomRate = windowWidth / designWidth;
      } else if (windowWidth < designWidth) {
        // 设备宽度小于设计稿, 缩小字体
        if (windowWidth <= designWidth / 2) {
          // 小于375px时按照375来处理, iphone6的宽度
          baseZoomRate = 0.5;
        } else {
          baseZoomRate = windowWidth / designWidth;
        }
      }
    };
    const changeFontSize = () => {
      const fontSize = baseFontSize * baseZoomRate;
      document
        .getElementsByTagName("html")[0]
        .setAttribute("style", `font-size:${fontSize}px !important`);
    };
    const fitSize = () => {
      changeZoomRate();
      changeFontSize();
    };
    fitSize();

    window.addEventListener("resize", () => {
      fitSize();
    });
  })(); // 只有传递参数时, 才需要在这个位置加上圆括号
</script>

之后在开发页面时, 元素的那些宽高属性就换算成 rem 来输入.
比如 750px 宽的设计稿上的 60px 宽的按钮, 在代码里用width=0.8rem来写.这样当屏幕宽度为 375px 的设备打开网页时, 按钮会以实际 30px 的宽度来显示.