使用rem更好的去适配页面元素

需要一段JS：
      (function (doc) {
        let docEl = doc.documentElement; // 获取根节点的html
        doc.addEventListener("DOMContentLoaded", recalc);
        function recalc() {
          let width = docEl.clientWidth;
          docEl.style.fontSize = 20 * (width / 320) + "px";
        }
      })(document);

 

解释：

  • 使用IIFE（立即执行函数表达式）来封装整个功能，确保变量不会污染全局作用域。

  • 获取文档的<html>元素，存储在docEl变量中。

  • 添加一个事件监听器，监听DOMContentLoaded事件，当DOM加载完成时调用recalc函数。

  • 在recalc函数中：

  • 获取<html>元素的可视宽度（不包括滚动条），存储在width变量中。
  • 根据width计算新的字体大小。这里使用了一个公式20 * (width / 320)，意味着当宽度为320px时，根元素的字体大小为20px；宽度增加时，字体大小按比例增加。
  • 将计算出的字体大小设置为<html>元素的style.fontSize属性，单位为px。

  • 最后，将document对象作为参数传入IIFE，使内部函数可以访问到文档对象。

完整例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .app{
        width: 10rem;
        height: 10rem;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="app">app</div>
    <script>
      (function (doc) {
        let docEl = doc.documentElement; // 获取根节点的html
        doc.addEventListener("DOMContentLoaded", recalc);
        function recalc() {
          let width = docEl.clientWidth;
          docEl.style.fontSize = 20 * (width / 320) + "px";
        }
      })(document);
    </script>
  </body>
</html>

 

posted @ 2024-10-22 09:48  洛晨随风  阅读(2)  评论(0)  编辑  收藏  举报