Inicio Explorar Ayuda
Iniciar sesión
lovecoding
/
W250913
10
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Explorar el Código

admin

fengchuanyu hace 1 día
padre
75fb968a81
commit
7aaf14fc0b
Se han modificado 3 ficheros con 82 adiciones y 0 borrados
Unificar vista Mostrar estadísticas de diff
  1. 11 0
      7_移动端/1_viewport.html
  2. 42 0
      7_移动端/2_rem&em.html
  3. 29 0
      7_移动端/3_相对单位.html

+ 11 - 0
7_移动端/1_viewport.html
Ver fichero 

@@ -0,0 +1,11 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    hello world
 
+</body>
 
+</html>

+ 42 - 0
7_移动端/2_rem&em.html
Ver fichero 

@@ -0,0 +1,42 @@
 
+<!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>
 
+        /* 浏览器对页面的默认字体大小是16px */
 
+        /* 页面中字体最小只能是12px */
 
+        html{
 
+            font-size:30px;
 
+        }
 
+        .box{
 
+            font-size: 20px;
 
+        }
 
+        .box1{
 
+            /* font-size: 20px; */
 
+            /*  */
 
+            /* 2em 是相对于父元素的字体大小 但如果当前元素也设置font-size 那么以当前元素的font-size为准 比如父元素font-size为20px * 2 = 40px */
 
+            /* font-size: 2em; */
 
+            /* width: 3em;
 
+            height: 3em;
 
+            border:0.5em solid #000; */
 
+        }
 
+
 
+        .box1{
 
+            /* rem 是相对于根元素的字体大小 就是html的 font-size 比如html font-size为30px * 2 = 60px */
 
+            font-size: 2rem;
 
+            width: 3rem;
 
+            height: 3rem;
 
+            border:0.5rem solid #000;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="box1">
 
+            hello world
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 29 - 0
7_移动端/3_相对单位.html
Ver fichero 

@@ -0,0 +1,29 @@
 
+<!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{
 
+            /* vw viewport width 是相对于视口的宽度 1vw = 1%视口宽度 */
 
+            width: 100vw;
 
+            /* vh viewport height 是相对于视口的高度 1vh = 1%视口高度 */
 
+            height: 100vh;
 
+            background-color: blue;
 
+        }
 
+        .box1{
 
+            height: 100px;
 
+            width: calc(100vw - 1000px);
 
+            background-color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- <div class="box"></div> -->
 
+    <div class="box1"></div>
 
+</body>
 
+</html>