Home Verkennen Help
Inloggen
lovecoding
/
W250511
10
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Bladeren bron

admin

fengchuanyu 1 week geleden
bovenliggende
f2c0fc5a2e
commit
63c2e64b48
3 gewijzigde bestanden met toevoegingen van 103 en 0 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 32 0
      7-移动端/1_vhvw.html
  2. 41 0
      7-移动端/2_rem与em.html
  3. 30 0
      7-移动端/3_calc.html

+ 32 - 0
7-移动端/1_vhvw.html
Bestand weergeven 

@@ -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>
 
+        *{
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        .box1{
 
+            /* width: 100%;
 
+            height: 100%; */
 
+            /* position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0; */
 
+
 
+            width: 100vw;
 
+            height: 100vh;
 
+            background-color: red; 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box1">
 
+        
+    </div>
 
+</body>
 
+</html>

+ 41 - 0
7-移动端/2_rem与em.html
Bestand weergeven 

@@ -0,0 +1,41 @@
 
+<!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;
 
+        }
 
+        html{
 
+            font-size: 20px;
 
+        }
 
+        /* rem 相对于根元素（html）的字体大小 */
 
+
 
+        .box{
 
+           width: 10rem;
 
+           height: 10rem;
 
+           background-color: red;
 
+        }
 
+        .div1{
 
+            font-size: 30px;
 
+        }
 
+        /* em 相对于本身 及 祖先元素的font-size */
 
+        .div2{
 
+            font-size: 20px;
 
+            width: 10em;
 
+            height: 10em;
 
+            background-color: blue;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+
 
+    <div class="div1">
 
+        <div class="div2"></div>
 
+    </div>
 
+</body>
 
+</html>

+ 30 - 0
7-移动端/3_calc.html
Bestand weergeven 

@@ -0,0 +1,30 @@
 
+<!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;
 
+        }
 
+        .div1{
 
+            width: 300px;
 
+            height: 500px;
 
+            background-color: red;
 
+            float: left;
 
+        }
 
+        .div2{
 
+            width: calc(100% - 300px);
 
+            height: 500px;
 
+            background-color: blue;
 
+            float: left;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="div1"></div>
 
+    <div class="div2"></div>
 
+</body>
 
+</html>