il y a 6 jours · 36d50a2a4a
--- a/7_移动端/3_媒体查询.html
+++ b/7_移动端/3_媒体查询.html
@@ -0,0 +1,55 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <style>
			
 
				+        .box {
			
 
				+            width: 200px;
			
 
				+            height: 200px;
			
 
				+            background-color: red;
			
 
				+        }
			
 
				+
			
 
				+        /* @media 媒体查询 后边为设备类型 screen（电脑、平板、手机） */
			
 
				+        /* 设备类型后边可以添加媒体查询条件 表示当前屏幕的尺寸 但是要用and连接 */
			
 
				+        /* @media screen and (max-width: 1200px)  {
			
 
				+            .box{
			
 
				+                background-color: blue;
			
 
				+            }
			
 
				+        }
			
 
				+        @media screen and (min-width: 1201px)  {
			
 
				+            .box{
			
 
				+                background-color: green;
			
 
				+            }
			
 
				+            .div1{
			
 
				+                font-size: 20px;
			
 
				+            }
			
 
				+        } */
			
 
				+
			
 
				+        /* @media screen and (max-width: 1200px) and (min-width: 600px) {
			
 
				+            .box {
			
 
				+                background-color: yellow;
			
 
				+            }
			
 
				+        } */
			
 
				+        /* 横向屏幕 媒体查询 */
			
 
				+        @media screen and (orientation: landscape) {
			
 
				+            .box{
			
 
				+                background-color: pink;
			
 
				+            }
			
 
				+        }
			
 
				+        /* 纵向屏幕 媒体查询 */
			
 
				+        @media screen and (orientation: portrait) {
			
 
				+            .box{
			
 
				+                background-color: purple;
			
 
				+            }
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div class="box"></div>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/7_移动端/4_等比缩放.html
+++ b/7_移动端/4_等比缩放.html
@@ -0,0 +1,43 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <style>
			
 
				+        .box {
			
 
				+            /* width: 600px; */
			
 
				+            max-width: 600px;
			
 
				+            margin: 100px auto;
			
 
				+        }
			
 
				+
			
 
				+        .box img {
			
 
				+            width: 100%;
			
 
				+        }
			
 
				+
			
 
				+        .box2 {
			
 
				+            max-width: 600px;
			
 
				+            margin: 0 auto;
			
 
				+
			
 
				+        }
			
 
				+
			
 
				+        .box3 {
			
 
				+            background-image: url(./img/img1.jpg);
			
 
				+            background-size: cover;
			
 
				+            width: 100%;
			
 
				+            padding-top:62.5%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div class="box">
			
 
				+        <img src="./img/img1.jpg" alt="">
			
 
				+    </div>
			
 
				+    <div class="box2">
			
 
				+        <div class="box3"></div>
			
 
				+    </div>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/7_移动端/img/img1.jpg
+++ b/7_移动端/img/img1.jpg