18 horas atrás · 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>