10 сар өмнө · 2b378e855b
--- a/移动端/1.初始.html
+++ b/移动端/1.初始.html
@@ -0,0 +1,18 @@
 
															+<!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: 300px;
														
 
															+            height: 300px;
														
 
															+            background-color: red;
														
 
															+        }
														
 
															+    </style>
														
 
															+</head>
														
 
															+<body>
														
 
															+    <div id="box"></div>
														
 
															+</body>
														
 
															+</html>
														
--- a/移动端/2.移动端单位.html
+++ b/移动端/2.移动端单位.html
@@ -0,0 +1,57 @@
 
															+<!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: 1rem;
														
 
															+            /* width: 200px; */
														
 
															+            /* height: 300px; */
														
 
															+            /* height: 10vh; */
														
 
															+            height: calc(500px - 10vh);
														
 
															+            background: #00f;
														
 
															+            color: red;
														
 
															+            font-size: 16px;
														
 
															+        }
														
 
															+        .aa {
														
 
															+            width: 100px;
														
 
															+            height: 2%;
														
 
															+            background: #ff0;
														
 
															+        }
														
 
															+        p {
														
 
															+            color:#fff;
														
 
															+            font-size: 1em;
														
 
															+            /* font-size: 20px; */
														
 
															+            /* text-indent: 2em; */
														
 
															+            
														
 
															+        }
														
 
															+        /* 
														
 
															+            单位
														
 
															+            px 像素
														
 
															+            %  百分比
														
 
															+            rem 根字体 1rem = 16px
														
 
															+            em  根据父级字体大小决定
														
 
															+            viewport
														
 
															+            vw : width  视口宽度
														
 
															+            vh:  height 视口高度
														
 
															+            calc()
														
 
															+        */
														
 
															+    </style>
														
 
															+</head>
														
 
															+<body>
														
 
															+    <div id="box">
														
 
															+        父级
														
 
															+        <p>
														
 
															+            哈哈哈哈
														
 
															+        </p>
														
 
															+        <div class="aa"></div>
														
 
															+    </div>
														
 
															+    <script src="./rem.js"></script>
														
 
															+</body>
														
 
															+</html>
														
--- a/移动端/3.解决1px问题.html
+++ b/移动端/3.解决1px问题.html
@@ -0,0 +1,48 @@
 
															+<!DOCTYPE html>
														
 
															+<html lang="en">
														
 
															+<head>
														
 
															+    <meta charset="UTF-8">
														
 
															+    <!-- 
														
 
															+        viewport 视口
														
 
															+        content 内容
														
 
															+        width 宽度
														
 
															+        device-width 设备宽度
														
 
															+        initial-scale 初始缩放比例
														
 
															+     -->
														
 
															+    <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 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,43 @@
 
															+<!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: 300px;
														
 
															+            height: 300px;
														
 
															+            background: #f00;
														
 
															+        }
														
 
															+        @media screen and (min-width: 400px) and (max-width:414px) {
														
 
															+            #box {
														
 
															+                background-color: blue;
														
 
															+            }
														
 
															+        }
														
 
															+    </style>
														
 
															+</head>
														
 
															+<body>
														
 
															+    <!-- 
														
 
															+        作用:媒体查询通过条件来告诉浏览器如何为指定的视图渲染页面
														
 
															+        @media mediaType and|only|no (media feature) {
														
 
															+            ...样式
														
 
															+        }
														
 
															+        注意:中间必须有空格(and来连接多个条件的运行语句，only表示仅有条件，通过被忽略，not表示非/除了某个尺寸)
														
 
															+
														
 
															+         用 @media 开头 注意@符号
														
 
															+         mediatype 媒体类型
														
 
															+              all 所有设备
														
 
															+            screen 显示器 包括pc 手机端 移动端
														
 
															+         关键字 and not only
														
 
															+         media feature 媒体特性 必须有小括号包含
														
 
															+
														
 
															+        样式引入
														
 
															+          <link rel="stylesheet" media="screen and (min-width:375px)" href="./style.css"/>
														
 
															+
														
 
															+        <link rel="stylesheet" media="screen and (min-width:680px)" href="./style1.css"/>
														
 
															+
														
 
															+     -->
														
 
															+     <div id="box"></div>
														
 
															+</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
--- a/移动端/images/4.jpg
+++ b/移动端/images/4.jpg
--- a/移动端/images/card_vip1.png
+++ b/移动端/images/card_vip1.png
--- a/移动端/images/icon_kugou1.png
+++ b/移动端/images/icon_kugou1.png
--- a/移动端/images/icon_search_black.png
+++ b/移动端/images/icon_search_black.png
--- a/移动端/rem.js
+++ b/移动端/rem.js
@@ -0,0 +1,31 @@
 
															+;
														
 
															+(function(win) {
														
 
															+    var doc = win.document;
														
 
															+    var docEl = doc.documentElement; 
														
 
															+    var tid;
														
 
															+
														
 
															+    function refreshRem() {
														
 
															+        // 获取屏幕宽度
														
 
															+       
														
 
															+        var width = docEl.getBoundingClientRect().width;
														
 
															+        var rem = width / 7.5; // 将屏幕宽度分成6.4份， 1份为1rem   320/6.4 = 50 
														
 
															+        // 让html的fontSize = 50px   1rem = 50px
														
 
															+        docEl.style.fontSize = rem + 'px'; 
														
 
															+        // 320  /6.4 = 50   html->50      1rem   50 
														
 
															+        // 640  /6.4 = 100  html-> 100           100
														
 
															+    }
														
 
															+
														
 
															+    // win.addEventListener('resize', function() {
														
 
															+    //     clearTimeout(tid);
														
 
															+    //     tid = setTimeout(refreshRem, 10);
														
 
															+    // }, false);
														
 
															+    // win.addEventListener('pageshow', function(e) {
														
 
															+    //     if (e.persisted) {
														
 
															+    //         clearTimeout(tid);
														
 
															+    //         tid = setTimeout(refreshRem, 10);
														
 
															+    //     }
														
 
															+    // }, false);
														
 
															+
														
 
															+    refreshRem();
														
 
															+
														
 
															+})(window);