3 settimane fa · a5c696f54e
--- a/移动端/2.如何解决1px问题.html
+++ b/移动端/2.如何解决1px问题.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>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <!-- 
			
 
				+        1.设置视口的initial-scale
			
 
				+        document.write('<meta name="viewport" content="width=device-width,initial-scale='+ 1/window.devicePixelRatio +',user-scalable=no">');
			
 
				+        通过window.devicePixelRatio获取到dpr，若dpr为2，则1px在retina屏上实际上横跨了2个像素，通过将scale设置为1/2，
			
 
				+
			
 
				+        2.使用transform中的scale属性 //width和height设为原来的2倍
			
 
				+        .box{
			
 
				+            width: 200px;
			
 
				+            height: 200px;
			
 
				+            border: 1px solid black;
			
 
				+            transform: scale(0.5);
			
 
				+        }
			
 
				+     -->
			
 
				+    <!-- 
			
 
				+        设置meta标签，禁止用户缩放
			
 
				+
			
 
				+            <meta name="viewport"
			
 
				+            content="width = device-width,
			
 
				+            user-scalable = no,
			
 
				+            initial-scale = 1.0,
			
 
				+            maximum-scale = 1.0,
			
 
				+            minimum-scale = 1.0"
			
 
				+            />
			
 
				+            作用:告诉浏览器使用设备的宽度作为视图的宽度
			
 
				+
			
 
				+            viewport 视图大小
			
 
				+            width 页面宽度
			
 
				+            device-width 设备的物理宽度(屏幕宽度)
			
 
				+            initial-scale 设备也没的初始缩放值 (值>1 放大; 值<1 缩小,最小为0，不能为负)
			
 
				+            minimum-scale 允许用户的最小缩放值
			
 
				+            maximum-scale 允许用户的最大缩放值
			
 
				+            user-scalable 是否允许用户进行缩放,值为no或yes
			
 
				+            (能够解决iPad切换横屏之后触摸才能回到具体尺寸的问题)
			
 
				+
			
 
				+      -->
			
 
				+  </body>
			
 
				+</html>
			
--- a/移动端/3.相对单位.html
+++ b/移动端/3.相对单位.html
@@ -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>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+        }
			
 
				+        #box {
			
 
				+            /* vw:viewport width 相对于视口的宽度 1vw = 1%视口宽度 */
			
 
				+            /* vh:viewport height 相对于视口的高度 1vw = 1%视口高度 */
			
 
				+            width: 100vw;
			
 
				+            height: calc(100vh - 200px);
			
 
				+            background: #00f;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="box"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/移动端/4.min&max.html
+++ b/移动端/4.min&max.html
@@ -0,0 +1,27 @@
 
				+<!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>
			
 
				+        /* 0.1+0.2!=0.3 */
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+        }
			
 
				+        #box {
			
 
				+            height: 600px;
			
 
				+            min-width: 300px;
			
 
				+            max-width: 1000px;
			
 
				+            background: url("../html+css/images/img01.gif");
			
 
				+            background-size: cover;
			
 
				+            background-position: center;
			
 
				+            background-repeat: no-repeat;
			
 
				+            margin: 0 auto;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="box"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/移动端/5.媒体查询.html
+++ b/移动端/5.媒体查询.html
@@ -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>
			
 
				+    <!-- <link rel="stylesheet" href="./xxx" media="screen and  (min-width:375px) and (max-width:414px)"> -->
			
 
				+    <style>
			
 
				+        #box{
			
 
				+            width: 200px;
			
 
				+            height: 200px;
			
 
				+            background: #00f;
			
 
				+        }
			
 
				+        @media screen and  (min-width:375px) and (max-width:414px) {
			
 
				+            #box {
			
 
				+                background: #f00;
			
 
				+            }
			
 
				+        }
			
 
				+        @media screen and  (min-width:500px) {
			
 
				+            #box {
			
 
				+                background: #ff0;
			
 
				+            }
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="box"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/移动端/6.等比缩放.html
+++ b/移动端/6.等比缩放.html
@@ -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>
			
 
				+        body {
			
 
				+            margin: 0;
			
 
				+        }
			
 
				+        #box {
			
 
				+            max-width: 400px;
			
 
				+            margin: 100 auto;
			
 
				+            overflow: hidden;
			
 
				+        }
			
 
				+        #box1 {
			
 
				+            padding-top: 56.25%;
			
 
				+            background: url("../html+css/images/img01.gif");
			
 
				+            background-size: cover;
			
 
				+            background-position: center;
			
 
				+            background-repeat: no-repeat;
			
 
				+
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 实现一个固定宽 响应式盒子 -->
			
 
				+     <div id="box">
			
 
				+        <div id="box1"></div>
			
 
				+     </div>
			
 
				+</body>
			
 
				+</html>