移动端自适应布局（viewport+rem）

@山海@

已于 2022-01-19 09:58:31 修改

阅读量285

点赞数 2

文章标签： javascript css elementui

于 2022-01-07 11:16:43 首次发布

本文链接：https://blog.csdn.net/u012834688/article/details/122358300

版权

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>test</title>
  </head>
  <script>
   window.onload = function () {
      getRem(750, 100) //设计图纸的屏幕的宽度，rem的计算值
    };
    window.onresize = function () {//设计图纸的屏幕的宽度，rem的计算值
      getRem(750, 100)
    };
    function getRem(pwidth, prem) {
      var html = document.getElementsByTagName("html")[0];//获取整体页面的html标签
      var oWidth = document.body.clientWidth || document.documentElement.clientWidth;//获取当前屏幕宽度
      html.style.fontSize = oWidth / pwidth * prem + "px"; //按照计算1rem等于这里得整合
    }
  </script>
  <body>
    <div id="app-box">
        <div class="daad">111111</div>
    </div>
  </body>
  <style>
  .daad{
   width:1rem; /*根据设计图测量的数值除以上面定的比如100再*2就得到了rem */
   font-size:0.2rem;
   background:red;
  }
  </style>
</html>