feat: 移动端动态设置fontSize适配rem

11 months ago · ef595d195a
parent 6471ca3361
commit ef595d195a
1 changed files with 67 additions and 0 deletions
--- a/demoHtml/rem.html
+++ b/demoHtml/rem.html
@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"
+        />
+        <title>动态设置根元素fontSize来适配rem</title>
+        <style>
+            * {
+                padding: 0;
+                margin: 0;
+                box-sizing: border-box;
+            }
+            body {
+                font-size: 0.28rem;
+            }
+            .box1 {
+                width: 4rem;
+                height: 4rem;
+                background: #444;
+                margin: 0 auto;
+            }
+            .box2 {
+                width: 80%;
+                height: 3rem;
+                margin: 0.2rem auto;
+                background: yellow;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="box1">盒子一</div>
+        <div class="box2">盒子二</div>
+    </body>
+</html>
+
+<script>
+    //设计稿默认宽度尺寸
+    const WIDTH = 750;
+    //px转换为rem的放大倍率
+    const SCALE = 100;
+
+    const setView = () => {
+        /**
+         * document.documentElement获取文档的根节点，即html元素
+         * 设置html标签的fontSize
+         **/
+        document.documentElement.style.fontSize = (SCALE * screen.width) / WIDTH + 'px';
+    };
+
+    /**
+     * 监听屏幕方向变化，调用setView重新计算
+     **/
+    window.onorientationchange = setView;
+
+    /**
+     * 监听浏览器尺寸发生变化, 调用setView重新计算
+     **/
+    window.addEventListener('resize', setView);
+
+    /**
+     * 页面加载时，执行一次setView设置fontSize
+     **/
+    setView();
+</script>