适配

最新推荐文章于 2024-06-25 15:46:23 发布

小风儿

最新推荐文章于 2024-06-25 15:46:23 发布

阅读量168

点赞数 1

分类专栏： H5

本文链接：https://blog.csdn.net/littlewindy520/article/details/87100675

版权

H5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html data-use-rem="750">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="./static/css/reset.css">
    <link rel="stylesheet" href="./static/css/common.css">
    <title>工商项目</title>
  </head>
  <body>
    <script type="text/javascript">
    (function(win) {
            var doc = win.document,
              html = doc.documentElement,
              option = html.getAttribute("data-use-rem");
            if(option === null) {
              return
            }
            var baseWidth = parseInt(option).toString() === "NaN" ? 640 : parseInt(option);
            var grids = baseWidth / 100;
            var clientWidth = html.clientWidth || 320;
            html.style.fontSize = clientWidth / grids + "px";
            var testDom = document.createElement("div");
            var testDomWidth = 0;
            var adjustRatio = 0;
            testDom.style.cssText = "height:0;width:1rem;";
            doc.body.appendChild(testDom);
            var calcTestDom = function() {
              testDomWidth = testDom.offsetWidth;
              if(testDomWidth !== Math.round(clientWidth / grids)) {
                adjustRatio = clientWidth / grids / testDomWidth;
                var reCalcRem = clientWidth * adjustRatio / grids;
                html.style.fontSize = reCalcRem + "px"
              } else {
                doc.body.removeChild(testDom)
              }
            };
            setTimeout(calcTestDom, 20);
            var reCalc = function() {
              var newCW = html.clientWidth;
              if(newCW === clientWidth) {
                return
              }
              clientWidth = newCW;
              html.style.fontSize = newCW * (adjustRatio ? adjustRatio : 1) / grids + "px"
            };
            if(!doc.addEventListener) {
              return
            }
            var resizeEvt = "orientationchange" in win ? "orientationchange" : "resize";
            win.addEventListener(resizeEvt, reCalc, false);
            doc.addEventListener("DOMContentLoaded", reCalc, false)
          })(window);
    </script>

    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>