练习

2021-04-29 17:16:40 +08:00
parent 812be57880
commit 55c598cdb1
195 changed files with 12788 additions and 34 deletions
--- a/teaching/lhj/kejian/media.html
+++ b/teaching/lhj/kejian/media.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script>
+        //designWidth:设计稿的实际宽度值，需要根据实际设置
+//maxWidth:制作稿的最大宽度值，需要根据实际设置
+//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
+;(function(designWidth, maxWidth) {
+	var doc = document,
+	win = window,
+	docEl = doc.documentElement,
+	remStyle = document.createElement("style"),
+	tid;
+
+	function refreshRem() {
+		var width = docEl.getBoundingClientRect().width;
+		maxWidth = maxWidth || 540;
+		width>maxWidth && (width=maxWidth);
+		var rem = width * 100 / designWidth;
+		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
+	}
+
+	if (docEl.firstElementChild) {
+		docEl.firstElementChild.appendChild(remStyle);
+	} else {
+		var wrap = doc.createElement("div");
+		wrap.appendChild(remStyle);
+		doc.write(wrap.innerHTML);
+		wrap = null;
+	}
+	//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
+	refreshRem();
+
+	win.addEventListener("resize", function() {
+		clearTimeout(tid); //防止执行两次
+		tid = setTimeout(refreshRem, 300);
+	}, false);
+
+	win.addEventListener("pageshow", function(e) {
+		if (e.persisted) { // 浏览器后退的时候重新计算
+			clearTimeout(tid);
+			tid = setTimeout(refreshRem, 300);
+		}
+	}, false);
+
+	if (doc.readyState === "complete") {
+		doc.body.style.fontSize = "16px";
+	} else {
+		doc.addEventListener("DOMContentLoaded", function(e) {
+			doc.body.style.fontSize = "16px";
+		}, false);
+	}
+})(750, 750);
+/*
+	第一个参数是设计稿的宽度，一般设计稿有640，或者是750，你可以根据实际调整
+	第二个参数则是设置制作稿的最大宽度，超过750，则以750为最大限制。
+    1rem=100px
+*/
+    </script>
+    <!-- <style>
+        *{
+            margin:0;
+            padding:0;
+        }
+        .box{
+            width: 200px;
+            height: 200px;
+            background: blue;
+        }
+        @media (max-width:1000px){
+            body{
+                background: red;
+            }
+            .box{
+                background: white;
+            }
+        }
+
+        @media (max-width:900px){
+            body{
+                background: blue;
+            }
+            .box{
+                background: gold;
+            }
+        }
+
+    </style> -->
+
+<style>
+        *{
+            margin:0;
+            padding:0;
+        }
+        .shoplistitem{
+            width: 6.14rem;
+            height: 1.43rem;
+            background: blue;
+        }
+    </style>
+</head>
+<body>
+    <div class="shoplistitem">
+
+    </div>
+</body>
+</html>