Accueil Explorer Aide
Connexion
lovecoding
/
W250511
10
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

admin

fengchuanyu il y a 1 semaine
Parent
68817c001a
commit
661bb362aa
5 fichiers modifiés avec 148 ajouts et 0 suppressions
Vue séparée Afficher les stats Diff
  1. 23 0
      7-移动端/4_max与min.html
  2. 32 0
      7-移动端/5_媒体查询.html
  3. 19 0
      7-移动端/6_等比缩放.html
  4. 38 0
      7-移动端/练习1_两列布局.html
  5. 36 0
      7-移动端/练习2_两列布局2.html

+ 23 - 0
7-移动端/4_max与min.html
Voir le fichier 

@@ -0,0 +1,23 @@
 
+<!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{
 
+            /* max-widht 最大宽度 */
 
+            /* 当前元素可以缩放 但是最大宽度只能是800px */
 
+            max-width: 800px;
 
+            min-width: 300px;
 
+            height: 500px;
 
+            background-color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+
 
+    </div>
 
+</body>
 
+</html>

+ 32 - 0
7-移动端/5_媒体查询.html
Voir le fichier 

@@ -0,0 +1,32 @@
 
+<!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: 400px;
 
+            height: 400px;
 
+            background-color: blue;
 
+        }
 
+
 
+        /* 媒体查询 */
 
+        /* 当屏幕宽度小于等于500px 时  把box的背景颜色改为红色 */
 
+
 
+        @media screen and (max-width:500px){
 
+            .box{
 
+                background-color: red;
 
+            }
 
+        }
 
+        @media screen and (max-width:800px ) and (min-width:501px){
 
+            .box{
 
+                background-color: green;
 
+            }
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 19 - 0
7-移动端/6_等比缩放.html
Voir le fichier 

@@ -0,0 +1,19 @@
 
+<!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{
 
+            max-width: 800px;
 
+            background-color: red;
 
+            /* padding 的100% 是相对于自身的宽度 */
 
+            padding-top: 50%;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 38 - 0
7-移动端/练习1_两列布局.html
Voir le fichier 

@@ -0,0 +1,38 @@
 
+<!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>
 
+        *{
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        .box{
 
+            height: 500px;
 
+            position: relative;
 
+        }
 
+        .div1{
 
+            width: 300px;
 
+            height: 100%;
 
+            background-color: red;
 
+        }   
+        .div2{
 
+            position: absolute;
 
+            left: 300px;
 
+            top: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background-color: blue;
 
+        }
 
+        
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="div1"></div>
 
+        <div class="div2"></div>
 
+    </div>
 
+</body>
 
+</html>

+ 36 - 0
7-移动端/练习2_两列布局2.html
Voir le fichier 

@@ -0,0 +1,36 @@
 
+<!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>
 
+        *{
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        .box{
 
+            height: 500px;
 
+            display: flex;
 
+        }
 
+        .div1{
 
+            width: 300px;
 
+            height: 100%;
 
+            background-color: red;
 
+        }   
+        .div2{
 
+            height: 100%;
 
+            /* flex: 1; */
 
+            flex-grow: 1;
 
+            background-color: blue;
 
+        }
 
+        
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="div1"></div>
 
+        <div class="div2"></div>
 
+    </div>
 
+</body>
 
+</html>