пре 2 недеља · 1181524202
--- a/移动端/1.移动端.html
+++ b/移动端/1.移动端.html
@@ -0,0 +1,28 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scaleble=no">
			
 
				+    <title>Document</title>
			
 
				+    <style>
			
 
				+        /* 根元素16px 最小12px  */
			
 
				+        #box {
			
 
				+            /* 根据根元素字体大小适配 */
			
 
				+            width: 3rem;
			
 
				+            height: 3rem;
			
 
				+            background: #00f;
			
 
				+            font-size: 20px;
			
 
				+        }
			
 
				+        p {
			
 
				+            /* em根据父元素字体大小适配 */
			
 
				+            font-size: 2em;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="box">
			
 
				+        <p>你好</p>
			
 
				+    </div>
			
 
				+    <script src="./rem封装.js"></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/移动端/rem封装.js
+++ b/移动端/rem封装.js
@@ -0,0 +1,20 @@
 
				+/**
			
 
				+ * 动态计算根字体大小 页面所有尺寸都用rem写 等比适配手机
			
 
				+ * 750 = 10rem
			
 
				+ * 1rem = 75px
			
 
				+ * */
			
 
				+
			
 
				+(function() {
			
 
				+    const  desighWidth = 750;
			
 
				+    const html = document.documentElement;
			
 
				+
			
 
				+    function setRem() {
			
 
				+        const width = html.clientWidth;
			
 
				+        const fontSize = width / desighWidth * 100;
			
 
				+        html.style.fontSize = fontSize + 'px';
			
 
				+    }
			
 
				+    setRem();
			
 
				+
			
 
				+    window.addEventListener("resize",setRem);
			
 
				+
			
 
				+})()