Home Explore Help
Sign In
lovecoding
/
VIP26
9
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fix:20

e 1 year ago
parent
4d0f85ef8b
commit
69ade8ed51
5 changed files with 173 additions and 0 deletions
Split View Show Diff Stats
  1. 22 0
      day20/html/1.移动端.html
  2. 43 0
      day20/html/2.移动端的单位.html
  3. 40 0
      day20/html/3.如何解决1px问题.html
  4. 37 0
      day20/html/4.媒体查询.html
  5. 31 0
      day20/rem.js

+ 22 - 0
day20/html/1.移动端.html
View File 

@@ -0,0 +1,22 @@
 
+<!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;
 
+        }
 
+        div {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #00f;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div></div>
 
+</body>
 
+</html>

+ 43 - 0
day20/html/2.移动端的单位.html
View File 

@@ -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>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        html,body {
 
+            /* font-size: 10px; */
 
+        }
 
+        #box {
 
+            width: 300px;
 
+            height: 300px;
 
+            background: #f00;
 
+            /* font-size: 20px; */
 
+        }
 
+        /* 
+            单位：
 
+            px 像素
 
+            rem 根元素大小 16px
 
+            em  根据父级元素大小调整
 
+            vh vw 相对于视口 设备
 
+            %  百分比 
+            calc()
 
+        */
 
+        #box1 {
 
+            width: calc(50vw - 100px);
 
+            height: 1rem;
 
+            background: #ff0;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        <div id="box1"></div>
 
+    </div>
 
+    <script src="../rem.js"></script>
 
+</body>
 
+</html>

+ 40 - 0
day20/html/3.如何解决1px问题.html
View File 

@@ -0,0 +1,40 @@
 
+<!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. 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>

+ 37 - 0
day20/html/4.媒体查询.html
View File 

@@ -0,0 +1,37 @@
 
+<!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;
 
+        }
 
+        div {
 
+            width: 10rem;
 
+            height: 10rem;
 
+            background: #f00;
 
+        }
 
+        @media screen and (min-width:375px) and (max-width:414px) {
 
+            div {
 
+                background: #00f;
 
+            }
 
+        }
 
+        @media screen and (min-width:768px) {
 
+            div {
 
+                background: #f0f;
 
+            }
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 
+        作用:媒体查询通过条件来告诉浏览器如何为指定的视图渲染页面
 
+        @media
 
+
 
+     -->
 
+     <div id="box"></div>
 
+</body>
 
+</html>

+ 31 - 0
day20/rem.js
View File 

@@ -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);