From ef595d195a93e96d870c38e4255ce5322ccb811d Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Tue, 11 Feb 2025 18:02:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E8=AE=BE=E7=BD=AEfontSize=E9=80=82=E9=85=8Drem?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demoHtml/rem.html | 67 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 demoHtml/rem.html
diff --git a/demoHtml/rem.html b/demoHtml/rem.html
new file mode 100644
index 0000000..3654cb7
--- /dev/null
+++ 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>
