H5页面设置1rem=100px(设计稿为750px),模拟

最新推荐文章于 2024-03-29 14:21:59 发布

small-zhou

最新推荐文章于 2024-03-29 14:21:59 发布

阅读量244

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_50178434/article/details/131372037

版权

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximim-scale=1.0,minimum-scale=1.0,user-scalable=no,minimal-ui">
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
  <script>
    var baseFont = function() {
      var baseSize = 100; // 设置1rem = 100px(设计稿);
      var baseWidth = 750; // 640 750 1080
      let clientWidth = document.documentElement.clientWidth > 750 ? 750 : document.documentElement.clientWidth;
      var fontSize = (clientWidth / baseWidth * baseSize).toFixed(2);
      document.getElementsByTagName("html")[0].style.fontSize = fontSize+"px";
    }
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        baseFont();
        _this.resizeFlag = null;
      }, 100);
    };
    baseFont();
  </script>
</html>