使用rem.js快速进行移动端（浏览器）适配

本文链接：https://blog.csdn.net/weixin_42333548/article/details/130089489

1.首先在我们的html页面中引入meta标签

<meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2.然后，在html页面中引入我们的rem.js适配脚本。(将下面的代码全部复制下来，在自己的项目代码里面新建一个rem.js脚本文件，将代码全部粘贴进去。然后在html页面中引入该脚本 )

(function() {
    setHtmlFontSize();
    window.onresize = () => setHtmlFontSize();

    function setHtmlFontSize() {
      let deviceWidth = document.documentElement.clientWidth,
          deviceHeight = document.documentElement.clientHeight;
      if (Math.abs(window.orientation) === 90) deviceWidth = deviceHeight;  //横屏状态

      // 兼容浏览器端，宽度超过600px则固定宽度大小，600按照自己页面需求做调整即可
      document.getElementsByTagName("html")[0].style.maxWidth = "600px";
      document.getElementsByTagName("html")[0].style.margin = "0px auto";
      if (deviceWidth > 600) deviceWidth = 600;

      // 设置移动端字体大小
      document.getElementsByTagName("html")[0].style.fontSize = deviceWidth / 37.5 + "px";
    }
})();

3.设置好之后，我们便可以根据设计稿的尺寸直接进行网页搭建了。如果设计稿上面某一个元素的尺寸是256px，那么我们在css样式中，将它的尺寸设置成25.6rem即可，即1rem=10px。元素的尺寸也按照这种关系转换即可。