网站首页编程语言正文

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

作者：看山就是山，看海就是海，山海更新时间： 2022-01-18 编程语言

<!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就得到了rem */
   font-size:0.2rem;
   background:red;
  }
  </style>
</html>

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

上一篇：uniapp实现动态标记效果详细步骤【前端开发】
下一篇：django中ajax发送post请求报403错误csrf禁

网站首页 编程语言 正文

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

相关推荐

网站首页编程语言正文