2 年前 · 2ca3c115c9
--- a/8_移动端/1_test.html
+++ b/8_移动端/1_test.html
@@ -0,0 +1,23 @@
 
				+<!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>
			
 
				+  <style>
			
 
				+    *{
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+    #div1{
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      background: red;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <div id="div1"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/8_移动端/2_移动端的单位.html
+++ b/8_移动端/2_移动端的单位.html
@@ -0,0 +1,50 @@
 
				+<!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>
			
 
				+
			
 
				+  <style>
			
 
				+    *{
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+    #div1{
			
 
				+      /* rem 相对于根元素html字体的大小 */
			
 
				+      /* rem = 50px */
			
 
				+      width: 3rem;
			
 
				+      height: 3rem;
			
 
				+      background: red;
			
 
				+      /* font-size: 50px; */
			
 
				+    }
			
 
				+    #div2{
			
 
				+      /* em 是根据父元素的字体大小 */
			
 
				+      /* em = 16px */
			
 
				+      /* width: 2em;
			
 
				+      height: 100px; */
			
 
				+      background: yellow;
			
 
				+      /* width: 50%;
			
 
				+      height: 50%; */
			
 
				+    }
			
 
				+    #div3{
			
 
				+      width: 100%;
			
 
				+      height: calc(100vh - 100px);
			
 
				+      background: blue;
			
 
				+    }
			
 
				+    /* vh vw 相当于视口 设备 */
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <div id="div1">
			
 
				+    <div id="div2"></div>
			
 
				+  </div>
			
 
				+  <div id="div3"></div>
			
 
				+  <script src="rem.js"></script>
			
 
				+  <!-- 
			
 
				+    325  150
			
 
				+    820  328
			
 
				+  -->
			
 
				+</body>
			
 
				+</html>
			
--- a/8_移动端/3_media.html
+++ b/8_移动端/3_media.html
@@ -0,0 +1,32 @@
 
				+<!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>
			
 
				+  <style>
			
 
				+    *{
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+    #div1{
			
 
				+      background: red;
			
 
				+      height: 200px;
			
 
				+    }
			
 
				+    @media screen and (max-width: 800px) {
			
 
				+        #div1{
			
 
				+          background: green;
			
 
				+        }
			
 
				+    }
			
 
				+    @media screen and (max-width: 400px) {
			
 
				+      #div1{
			
 
				+        background: blue;
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <div id="div1"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/8_移动端/4_小海豹.html
+++ b/8_移动端/4_小海豹.html
@@ -0,0 +1,99 @@
 
				+<!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>
			
 
				+  <style>
			
 
				+    *{
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+    h3{
			
 
				+      width: 980px;
			
 
				+      height: 50px;
			
 
				+      background: #ccc;
			
 
				+      text-align: center;
			
 
				+      line-height: 50px;
			
 
				+      margin: 0 auto 10px;
			
 
				+    }
			
 
				+    #img1{
			
 
				+      width: 980px;
			
 
				+      margin: 0 auto;
			
 
				+      display: block;
			
 
				+    }
			
 
				+    #img2,#img3{
			
 
				+      display: none;
			
 
				+    }
			
 
				+    #content{
			
 
				+      width: 980px;
			
 
				+      margin: 10px auto;
			
 
				+      overflow: hidden;
			
 
				+
			
 
				+    }
			
 
				+    #left{
			
 
				+      width: 630px;
			
 
				+      height: 300px;
			
 
				+      background: red;
			
 
				+      float: left;
			
 
				+    }
			
 
				+    #right{
			
 
				+      width: 340px;
			
 
				+      height: 300px;
			
 
				+      background: blue;
			
 
				+      float: right;
			
 
				+    }
			
 
				+    @media screen and (max-width: 980px) {
			
 
				+      h3{
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+      #img1,#img3{
			
 
				+        display: none;
			
 
				+      }
			
 
				+      #img2{
			
 
				+        display: block;
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+      #content{
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+      #left{
			
 
				+        width: 65%;
			
 
				+      }
			
 
				+      #right{
			
 
				+        width: 34%;
			
 
				+      }
			
 
				+    }
			
 
				+    @media screen and (max-width: 480px) {
			
 
				+      #img1,#img2{
			
 
				+        display: none;
			
 
				+      }
			
 
				+      #img3{
			
 
				+        display: block;
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+      #left{
			
 
				+        width: 100%;
			
 
				+        float: none;
			
 
				+      }
			
 
				+      #right{
			
 
				+        width: 100%;
			
 
				+        float: none;
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <h3>页眉</h3>
			
 
				+  <h3>导航</h3>
			
 
				+  <img id="img1" src="img/1.jpg" alt="">
			
 
				+  <img id="img2" src="img/2.jpg" alt="">
			
 
				+  <img id="img3" src="img/3.jpg" alt="">
			
 
				+  <div id="content">
			
 
				+    <div id="left"></div>
			
 
				+    <div id="right"></div>
			
 
				+  </div>
			
 
				+  <h3>页尾</h3>
			
 
				+</body>
			
 
				+</html>
			
--- a/8_移动端/img/1.jpg
+++ b/8_移动端/img/1.jpg
--- a/8_移动端/img/2.jpg
+++ b/8_移动端/img/2.jpg
--- a/8_移动端/img/3.jpg
+++ b/8_移动端/img/3.jpg
--- a/8_移动端/rem.js
+++ b/8_移动端/rem.js
@@ -0,0 +1,31 @@
 
				+;
			
 
				+(function(win) {
			
 
				+    var doc = win.document;
			
 
				+    var docEl = doc.documentElement; 
			
 
				+    var tid;
			
 
				+
			
 
				+    function refreshRem() {
			
 
				+        // 获取屏幕宽度
			
 
				+       
			
 
				+        var width = docEl.getBoundingClientRect().width;
			
 
				+        var rem = width / 7.5; // 将屏幕宽度分成6.4份， 1份为1rem   320/6.4 = 50 
			
 
				+        // 让html的fontSize = 50px   1rem = 50px
			
 
				+        docEl.style.fontSize = rem + 'px'; 
			
 
				+        // 320  /6.4 = 50   html->50      1rem   50 
			
 
				+        // 640  /6.4 = 100  html-> 100           100
			
 
				+    }
			
 
				+
			
 
				+    win.addEventListener('resize', function() {
			
 
				+        clearTimeout(tid);
			
 
				+        tid = setTimeout(refreshRem, 10);
			
 
				+    }, false);
			
 
				+    win.addEventListener('pageshow', function(e) {
			
 
				+        if (e.persisted) {
			
 
				+            clearTimeout(tid);
			
 
				+            tid = setTimeout(refreshRem, 10);
			
 
				+        }
			
 
				+    }, false);
			
 
				+
			
 
				+    refreshRem();
			
 
				+
			
 
				+})(window);