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

admin

fengchuanyu 17 hours ago
parent
00da93421c
commit
a8cbb37ab6
5 changed files with 88 additions and 0 deletions
Split View Show Diff Stats
  1. BIN
      7_移动端/.DS_Store
  2. 38 0
      7_移动端/6_等比缩放.html
  3. 23 0
      7_移动端/7_remjs.html
  4. 1 0
      7_移动端/a.js
  5. 26 0
      7_移动端/rem.js

BIN
7_移动端/.DS_Store
View File


+ 38 - 0
7_移动端/6_等比缩放.html
View File 

@@ -0,0 +1,38 @@
 
+<!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;
 
+        }
 
+        .box1{
 
+            max-width: 600px;
 
+            margin: 100px auto;
 
+
 
+        }
 
+        .box {
 
+            /* max-width: 600px; */
 
+            /* height: 300px; */
 
+            /* padding-top: 300px; */
 
+            /* padding 或者 margin 使用百分比 是相对于父元素的宽度 */
 
+            padding-top: 62.5%;
 
+            /* background-color: pink; */
 
+            background-image: url("./img/img1.jpg");
 
+            background-size: 100% 100%;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="box1">
 
+        <div class="box">
 
+        </div>
 
+    </div>
 
+
 
+</body>
 
+
 
+</html>

+ 23 - 0
7_移动端/7_remjs.html
View File 

@@ -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>
 
+        h1{
 
+            font-size: 1rem;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <h1>hello world</h1>
 
+    <!-- 引入js文件 使用script 但是如果在script标签中引入js文件 那么就不可以在script标签中写js代码 -->
 
+    <!-- <script src="./a.js"></script> -->
 
+     <script src="./rem.js"></script>
 
+    <!--如果需要在页面中写js代码 那么就要新建一个空的script标签 -->
 
+    <script>
 
+        console.log("hello world");
 
+    </script>
 
+</body>
 
+</html>

+ 1 - 0
7_移动端/a.js
View File 

@@ -0,0 +1 @@
 
+alert("hello world");

+ 26 - 0
7_移动端/rem.js
View File 

@@ -0,0 +1,26 @@
 
+;
 
+(function(win) {
 
+    var doc = win.document;
 
+    var docEl = doc.documentElement;
 
+    var tid;
 
+
 
+    function refreshRem() {
 
+        var width = docEl.getBoundingClientRect().width;
 
+        var rem = width / 7.5; // 将屏幕宽度分成7.5份， 1份为1rem
 
+        docEl.style.fontSize = rem + 'px';
 
+    }
 
+    
+    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);