Home Explore Help
Sign In
lovecoding
/
VIP22
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

new

zsydgithub 2 years ago
parent
89a5cfdc87
commit
2ca3c115c9
8 changed files with 235 additions and 0 deletions
Split View Show Diff Stats
  1. 23 0
      8_移动端/1_test.html
  2. 50 0
      8_移动端/2_移动端的单位.html
  3. 32 0
      8_移动端/3_media.html
  4. 99 0
      8_移动端/4_小海豹.html
  5. BIN
      8_移动端/img/1.jpg
  6. BIN
      8_移动端/img/2.jpg
  7. BIN
      8_移动端/img/3.jpg
  8. 31 0
      8_移动端/rem.js

+ 23 - 0
8_移动端/1_test.html
View File 

@@ -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>

+ 50 - 0
8_移动端/2_移动端的单位.html
View File 

@@ -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>

+ 32 - 0
8_移动端/3_media.html
View File 

@@ -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>

+ 99 - 0
8_移动端/4_小海豹.html
View File 

@@ -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>

BIN
8_移动端/img/1.jpg
View File


BIN
8_移动端/img/2.jpg
View File


BIN
8_移动端/img/3.jpg
View File


+ 31 - 0
8_移动端/rem.js
View File 

@@ -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);