9 時間前 · 9b5bfbdec1
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +0,0 @@
 
				-{
			
 
				-    "liveServer.settings.port": 5501
			
 
				-}
			
--- a/7_移动端/4_max&min.html
+++ b/7_移动端/4_max&min.html
@@ -0,0 +1,28 @@
 
				+<!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>
			
 
				+        body{
			
 
				+            margin: 0;
			
 
				+        }
			
 
				+        .box{
			
 
				+            height: 600px;
			
 
				+            /*max-width控制元素最大值  最大宽度为1000px */
			
 
				+            /* 当前屏幕大于1000px 元素宽度为1000px 小于1000px 元素宽度为当前屏幕宽度 */
			
 
				+            max-width: 1000px;
			
 
				+
			
 
				+            min-width: 300px;
			
 
				+            background-image: url("./img/img1.jpg");
			
 
				+            background-size: 100% 100%;
			
 
				+            margin: 0 auto;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    
			
 
				+    <div class="box"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/7_移动端/5_媒体查询.html
+++ b/7_移动端/5_媒体查询.html
@@ -0,0 +1,45 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <!-- 响应式布局  根据屏幕尺寸 来加载不同的css文件 -->
			
 
				+    <link rel="stylesheet" media="screen and (max-width:1000px) and (min-width:600px)" href="./css/a.css">
			
 
				+    <link rel="stylesheet" media="screen and (min-width:1200px)" href="./css/b.css">
			
 
				+    <style>
			
 
				+        .box{
			
 
				+            width: 1000px;
			
 
				+            height: 600px;
			
 
				+            background-color: red;
			
 
				+        }
			
 
				+        /* @media 媒体查询 根据屏幕类型和尺寸 来控制样式 */
			
 
				+        @media screen and (max-width:1000px) and (min-width:600px){
			
 
				+            .box{
			
 
				+                background-color: blue;
			
 
				+            }
			
 
				+
			
 
				+        }
			
 
				+        @media screen and (min-width:1200px){
			
 
				+            .box{
			
 
				+                background-color: green;
			
 
				+            }
			
 
				+        }
			
 
				+        /* @media 媒体查询 orientation 根据屏幕方向 来控制样式 landscape 横屏 */
			
 
				+        @media screen and (orientation:landscape){
			
 
				+            .box{
			
 
				+                background-color: pink;
			
 
				+            }
			
 
				+        }
			
 
				+        /* 竖屏  */
			
 
				+        @media screen and (orientation:portrait){
			
 
				+            .box{
			
 
				+                background-color: yellow;
			
 
				+            }
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="box">hello world</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/7_移动端/css/a.css
+++ b/7_移动端/css/a.css
@@ -0,0 +1,4 @@
 
				+.box{
			
 
				+    color: yellow;
			
 
				+    font-size: 100px;
			
 
				+}
			
--- a/7_移动端/css/b.css
+++ b/7_移动端/css/b.css
@@ -0,0 +1,4 @@
 
				+.box{
			
 
				+    color: white;
			
 
				+    font-size: 50px;
			
 
				+}
			
--- a/7_移动端/img/1.jpg
+++ b/7_移动端/img/1.jpg
--- a/7_移动端/img/2.jpg
+++ b/7_移动端/img/2.jpg
--- a/7_移动端/img/3.jpg
+++ b/7_移动端/img/3.jpg
--- a/7_移动端/img/img1.jpg
+++ b/7_移动端/img/img1.jpg
--- a/7_移动端/练习1_两端布局.html
+++ b/7_移动端/练习1_两端布局.html
@@ -0,0 +1,72 @@
 
				+<!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>
			
 
				+        body{
			
 
				+            margin: 0;
			
 
				+        }
			
 
				+        /* .box{
			
 
				+            display: flex;
			
 
				+        }
			
 
				+        .left{
			
 
				+            width: 300px;
			
 
				+            height: 600px;
			
 
				+            background-color: red;
			
 
				+        }
			
 
				+        .right{
			
 
				+            flex-grow: 1;
			
 
				+            height: 600px;
			
 
				+            background-image: url("./img/img1.jpg");
			
 
				+            background-size: 100% 100%;
			
 
				+        } */
			
 
				+
			
 
				+
			
 
				+        /* .left{
			
 
				+            width: 300px;
			
 
				+            height: 600px;
			
 
				+            background-color: red;
			
 
				+            float: left;
			
 
				+        }
			
 
				+        .right{
			
 
				+            float: left;
			
 
				+            width: calc(100% - 300px);
			
 
				+            height: 600px;
			
 
				+            background-image: url("./img/img1.jpg");
			
 
				+            background-size: 100% 100%;
			
 
				+        } */
			
 
				+
			
 
				+
			
 
				+        .box{
			
 
				+            position: relative;
			
 
				+            width: 100%;
			
 
				+            height: 600px;
			
 
				+        }
			
 
				+        .left{
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            left: 0;
			
 
				+            width: 300px;
			
 
				+            height: 100%;
			
 
				+            background-color: red;
			
 
				+        }
			
 
				+        .right{
			
 
				+            position: absolute;
			
 
				+            top:0;
			
 
				+            left: 300px;
			
 
				+            bottom: 0;
			
 
				+            right: 0;
			
 
				+            background-image: url("./img/img1.jpg");
			
 
				+            background-size: 100% 100%;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="box">
			
 
				+        <div class="left"></div>
			
 
				+        <div class="right"></div>
			
 
				+    </div>
			
 
				+</body>
			
 
				+</html>