1 năm trước cách đây · 6b4c0703cd
--- a/移动端/3.如何解决1px问题.html
+++ b/移动端/3.如何解决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/移动端/4.媒体查询.html
+++ b/移动端/4.媒体查询.html
@@ -0,0 +1,49 @@
 
				+<!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 {
			
 
				+            width: 3rem;
			
 
				+            height: 3rem;
			
 
				+            background: #00f;
			
 
				+        }
			
 
				+        @media screen and (min-width:375px) and (max-width:414px) {
			
 
				+            #box {
			
 
				+                background: #f00;
			
 
				+            }
			
 
				+        }
			
 
				+        @media screen and (min-width:768px) {
			
 
				+            #box {
			
 
				+                background: #ff0;
			
 
				+            }
			
 
				+        }
			
 
				+    </style>
			
 
				+    <!-- 
			
 
				+        //注意:中间必须有空格(and来连接多个条件的运行语句,only表示仅有条件,通过被忽略,not表示非/除了某个尺寸)
			
 
				+         用 @media 开头 注意@符号
			
 
				+         mediaType 媒体类型
			
 
				+         关键字 and not only
			
 
				+         media feature 媒体特性 必须有小括号包含
			
 
				+
			
 
				+          媒体类型
			
 
				+            all 所有设备
			
 
				+            screen 显示器 包括pc 手机端 移动端
			
 
				+        样式引入
			
 
				+        <link rel="stylesheet" media="screen and (min-width:375px)" href="./style.css"/>
			
 
				+
			
 
				+        <link rel="stylesheet" media="screen and (min-width:680px)" href="./style1.css"/>
			
 
				+
			
 
				+     -->
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="box"></div>
			
 
				+    <script src="./rem.js"></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/移动端/5.案例1.html
+++ b/移动端/5.案例1.html
@@ -0,0 +1,129 @@
 
				+<!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 {
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+      #header,
			
 
				+      #nav,
			
 
				+      #footer {
			
 
				+        width: 100%;
			
 
				+        height: 1rem;
			
 
				+        font-size: 0.5rem;
			
 
				+        text-align: center;
			
 
				+        line-height: 1rem;
			
 
				+        font-weight: bold;
			
 
				+        background: #ccc;
			
 
				+      }
			
 
				+      #nav {
			
 
				+        margin-top: 0.3rem;
			
 
				+      }
			
 
				+      #img3 {
			
 
				+        display: block;
			
 
				+        width: 100%;
			
 
				+        margin-top: 0.3rem;
			
 
				+      }
			
 
				+      #img1,
			
 
				+      #img2 {
			
 
				+        display: none;
			
 
				+      }
			
 
				+      .main {
			
 
				+        width: 100vw;
			
 
				+        height: 6rem;
			
 
				+      }
			
 
				+      .sideBar {
			
 
				+        width: 100%;
			
 
				+        height: 3rem;
			
 
				+        background: #f00;
			
 
				+        margin-top: 0.2rem;
			
 
				+      }
			
 
				+      .container {
			
 
				+        width: 100%;
			
 
				+        height: 3rem;
			
 
				+        background: #00f;
			
 
				+      }
			
 
				+      #footer {
			
 
				+        margin-top: 0.2rem;
			
 
				+      }
			
 
				+      @media screen and (min-width: 480px) {
			
 
				+        #img1 {
			
 
				+          display: block;
			
 
				+          width: 100%;
			
 
				+          margin-top: 0.3rem;
			
 
				+        }
			
 
				+        #img3,
			
 
				+        #img2 {
			
 
				+          display: none;
			
 
				+        }
			
 
				+        .main {
			
 
				+          width: 100%;
			
 
				+          height: 3rem;
			
 
				+          display: flex;
			
 
				+          justify-content: space-between;
			
 
				+          margin-top: 0.2rem;
			
 
				+        }
			
 
				+        .sideBar {
			
 
				+          width: 5rem;
			
 
				+          height: 3rem;
			
 
				+          margin-top: 0;
			
 
				+        }
			
 
				+        .container {
			
 
				+          flex: 1;
			
 
				+          height: 3rem;
			
 
				+          margin-left: 0.2rem;
			
 
				+        }
			
 
				+      }
			
 
				+      @media screen and (min-width: 960px) {
			
 
				+        #img2 {
			
 
				+          display: block;
			
 
				+          width: 100%;
			
 
				+          margin-top: 0.3rem;
			
 
				+        }
			
 
				+        #img3,
			
 
				+        #img1 {
			
 
				+          display: none;
			
 
				+        }
			
 
				+        .main {
			
 
				+          width: 100%;
			
 
				+          height: 3rem;
			
 
				+          display: flex;
			
 
				+          justify-content: space-between;
			
 
				+          margin-top: 0.2rem;
			
 
				+        }
			
 
				+        .sideBar {
			
 
				+          width: 4.8rem;
			
 
				+          height: 3rem;
			
 
				+          margin-top: 0;
			
 
				+        }
			
 
				+        .container {
			
 
				+          flex: 1;
			
 
				+          height: 3rem;
			
 
				+          margin-left: 0.2rem;
			
 
				+        }
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="box">
			
 
				+      <div id="header">页眉</div>
			
 
				+      <div id="nav">导航</div>
			
 
				+      <img id="img1" src="./images/1.jpg" alt="" />
			
 
				+      <img id="img2" src="./images/2.jpg" alt="" />
			
 
				+      <img id="img3" src="./images/3.jpg" alt="" />
			
 
				+      <div class="main">
			
 
				+        <div class="sideBar"></div>
			
 
				+        <div class="container"></div>
			
 
				+      </div>
			
 
				+      <div id="footer">页尾</div>
			
 
				+    </div>
			
 
				+    <script src="./rem.js"></script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/移动端/images/1.jpg
+++ b/移动端/images/1.jpg
--- a/移动端/images/2.jpg
+++ b/移动端/images/2.jpg
--- a/移动端/images/3.jpg
+++ b/移动端/images/3.jpg