1 年之前 · 648d67e5bb
--- a/移动端/1_test.html
+++ b/移动端/1_test.html
@@ -0,0 +1,19 @@
 
				+<!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>
			
 
				+    div{
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      background: red;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <div>123</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/移动端/2_移动端常用的单位.html
+++ b/移动端/2_移动端常用的单位.html
@@ -0,0 +1,48 @@
 
				+<!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;
			
 
				+    }
			
 
				+    /* html{
			
 
				+      font-size: 50px;
			
 
				+    } */
			
 
				+    #div1{
			
 
				+      height: 200px;
			
 
				+      background: red;
			
 
				+      width: 3rem;
			
 
				+      font-size: 100px;
			
 
				+    }
			
 
				+    #div2{
			
 
				+      /* height: 100px; */
			
 
				+      background: orange;
			
 
				+      /* width: 2em; */
			
 
				+      /* width: 10vw;
			
 
				+      height: 10vh; */
			
 
				+      width: 10%;
			
 
				+      height: 10%;
			
 
				+      /* vw vh  把视口分为100等分 根据输入的数字 去取多少 */
			
 
				+    }
			
 
				+    /* rem 是根据html的字体大小 */
			
 
				+    /* em 是根据父元素的字体大小 */
			
 
				+
			
 
				+    #div3{
			
 
				+      width: 100%;
			
 
				+      height: calc(100vh - 100px);
			
 
				+      background: blue;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <!-- <div id="div1">
			
 
				+    <div id="div2"></div>
			
 
				+  </div> -->
			
 
				+  <div id="div3"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/移动端/3_media.html
+++ b/移动端/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{
			
 
				+      height: 200px;
			
 
				+      background: red;
			
 
				+    }
			
 
				+    @media screen and (max-width: 800px) {
			
 
				+      #div1{
			
 
				+        background: green;
			
 
				+      }
			
 
				+    }
			
 
				+    @media screen and (max-width: 400px) {
			
 
				+      #div1{
			
 
				+        background: pink;
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <div id="div1"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/移动端/4_小海豹.html
+++ b/移动端/4_小海豹.html
@@ -0,0 +1,96 @@
 
				+<!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: 960px;
			
 
				+      height: 50px;
			
 
				+      background: #cccccc;
			
 
				+      text-align: center;
			
 
				+      line-height: 50px;
			
 
				+      margin: 0 auto 10px;
			
 
				+    }
			
 
				+    #img1{
			
 
				+      display: block;
			
 
				+      margin: 0 auto;
			
 
				+      width: 960px;
			
 
				+    }
			
 
				+    #img2,#img3{
			
 
				+      display: none;
			
 
				+    }
			
 
				+    #content {
			
 
				+      width: 960px;
			
 
				+      overflow: hidden;
			
 
				+      margin: 10px auto;
			
 
				+    }
			
 
				+    #left{
			
 
				+      width: 630px;
			
 
				+      height: 300px;
			
 
				+      background: red;
			
 
				+      float: left;
			
 
				+    }
			
 
				+    #right{
			
 
				+      width: 300px;
			
 
				+      height: 300px;
			
 
				+      background: blue;
			
 
				+      float: right;
			
 
				+    }
			
 
				+    @media screen and (max-width: 960px) {
			
 
				+      h3{
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+      #img1,#img3{
			
 
				+        display: none;
			
 
				+      }
			
 
				+      #img2{
			
 
				+        display: block;
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+      #content{
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+      #left{
			
 
				+        width: 65%;
			
 
				+      }
			
 
				+      #right{
			
 
				+        width: 33%;
			
 
				+      }
			
 
				+    }
			
 
				+    @media screen and (max-width: 480px) {
			
 
				+      #img1,#img2{
			
 
				+        display: none;
			
 
				+      }
			
 
				+      #img3{
			
 
				+        display: block;
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+      #left{
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+      #right{
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <h3>页眉</h3>
			
 
				+  <h3>导航</h3>
			
 
				+  <img src="img/1.jpg" alt="" id="img1">
			
 
				+  <img src="img/2.jpg" alt="" id="img2">
			
 
				+  <img src="img/3.jpg" alt="" id="img3">
			
 
				+  <div id="content">
			
 
				+    <div id="left"></div>
			
 
				+    <div id="right"></div>
			
 
				+  </div>
			
 
				+  <h3>页脚</h3>
			
 
				+</body>
			
 
				+</html>
			
--- a/移动端/img/1.jpg
+++ b/移动端/img/1.jpg
--- a/移动端/img/2.jpg
+++ b/移动端/img/2.jpg
--- a/移动端/img/3.jpg
+++ b/移动端/img/3.jpg