1 年之前 · 44fd5016d7
--- 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