rem布局index.html完整代码

最新推荐文章于 2024-03-29 21:20:35 发布

weixin_42626678

最新推荐文章于 2024-03-29 21:20:35 发布

阅读量218

点赞数

分类专栏：布局文章标签： js vue

本文链接：https://blog.csdn.net/weixin_42626678/article/details/104649790

版权

布局专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=2.0,user-scalable=no,viewport-fit=cover">
  <!-- width: 可视区域宽度是设备宽度
       initial-scale: 初始化缩放比例
       user-scalable: 用户是否可以缩放
       viewport-fit=cover: 用于适配苹果刘海屏
   -->
  <script type="text/javascript">
    (function (win, lib) {
      var doc = win.document // 文档内容
      var docEl = doc.documentElement
      var time // 定时器
      var dpr = 0 // 设备缩放
      var scale = 0
      var metal = docEl.querySelector('meta[name="viewport"]')
      if (metal) {
        var content = metal.getAttribute('content')
        var match = content.match(/initial\-scale=([\d\.]+)/)
        if (match) {
          scale = parseFloat(match[1])
          dpr = parseInt(1 / scale)
        }
      }
      function refreshRem () { // 1rem等于设备物理宽度/10
        var width = docEl.getBoundingClientRect().width // getBoundingClientRect()返回元素的大小及其相对于视口的位置
        var rem = width / 10
        docEl.style.fontSize = rem + 'px'
      }
      win.addEventListener('resize', function () {
        clearTimeout(time)
        time = setTimeout(() => {
          refreshRem()
        }, 300); // 函数防抖，0.3S内窗口大小没有改变才会触发rem重置，0.3秒内如果改变了则重新延时。
      })
      // doc.body.style.fontSize = 12 * dpr + 'px' // 这里body标签显示为null，因为我们在head中写的，此时body还未加载出来。所以我们应该使用
      // 下面的方法等body加载出来之后才设置body的font-size值
      if (doc.readyState === 'complete') { // readyState属性返回当前文档的状态 uninitialized - 还未开始载入 loading - 载入中
        // interactive - 已加载，文档与用户可以开始交互  complete - 载入完成
        doc.body.style.fontSize = 12 * dpr + 'px' // 为什么要设置body的fontsize大小？是因为不设置的话,会继承html的fontsize大小。又因为文档默认的div大小是需要容纳下默认字体大小的行高。所以会将元素撑高。
      } else {
        doc.addEventListener('DOMContentLoaded', function (e) {
          doc.body.style.fontSize = 12 * dpr + 'px' // 为什么要 * dpr,因为页面缩放的情况下，设置字体的大小也要缩放
        }, false)
      }
      refreshRem()
    })(window, window['lib'] || (window['lib'] = {}))
  </script>
</head>

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

</html>

weixin_42626678

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
rem布局index.html完整代码

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=2.0,user-scalable=no,viewport-fit=cover"> <!...
复制链接

扫一扫

专栏目录