Página Principal Explorar Ajuda
Iniciar Sessão
lovecoding
/
web0715
10
0
Fork 0
Ficheiros Problemas 0 Wiki
Ver Fonte

add

fengchuanyu há 8 meses atrás
pai
66f048f29c
commit
1b10bbb98f
7 ficheiros alterados com 230 adições e 0 exclusões
Visão Dividida Mostrar Estatísticas Diff
  1. 60 0
      7_HTML5/练习题4_历史管理2.html
  2. 18 0
      8_移动端/1_viewport.html
  3. 58 0
      8_移动端/2_em&rem.html
  4. 20 0
      8_移动端/3_max&min.html
  5. 30 0
      8_移动端/4_等比缩放.html
  6. 18 0
      8_移动端/5_calc.html
  7. 26 0
      8_移动端/rem.js

+ 60 - 0
7_HTML5/练习题4_历史管理2.html
Ver Ficheiro 

@@ -0,0 +1,60 @@
 
+<!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>
 
+        ul{
 
+            margin: 0;
 
+            padding: 0;
 
+            display: flex;
 
+        }
 
+        li{
 
+            list-style: none;
 
+            width: 100px;
 
+            height: 50px;
 
+            background-color: #aaa;
 
+            color: #fff;
 
+            font-weight: bold;
 
+            text-align: center;
 
+            line-height: 50px;
 
+        }
 
+        .active{
 
+            background-color: #000;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <ul>
 
+        <li data-hash="first" class="active">first</li>
 
+        <li data-hash="second">second</li>
 
+        <li data-hash="third">third</li>
 
+    </ul>
 
+    <script>
 
+        let aLi = document.querySelectorAll("li");
 
+        for(let i=0;i<aLi.length;i++){
 
+            aLi[i].onclick = function(e){
 
+                let thisVal = e.target.dataset.hash;
 
+                // location.hash = thisVal;
 
+                history.pushState(thisVal,"");
 
+                for(let j=0;j<aLi.length;j++){
 
+                    aLi[j].classList.remove("active");
 
+                }
 
+                this.classList.add("active");
 
+            }
 
+        }
 
+        window.onpopstate = function(e){
 
+            console.log(e.state);
 
+            for(let i=0;i<aLi.length;i++){
 
+                if(aLi[i].dataset.hash == e.state){
 
+                    aLi[i].classList.add("active")
 
+                }else{
 
+                    aLi[i].classList.remove("active");
 
+                }
 
+            }
 
+                
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 18 - 0
8_移动端/1_viewport.html
Ver Ficheiro 

@@ -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: 200px;
 
+            height: 200px;
 
+            background-color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 58 - 0
8_移动端/2_em&rem.html
Ver Ficheiro 

@@ -0,0 +1,58 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./rem.js"></script>
 
+    <style>
 
+        html{
 
+            font-size: 10px;
 
+        }
 
+        .div1{
 
+            font-size: 15px;
 
+        }
 
+        /* .box { */
 
+            /* font-size: 30px; */
 
+            /* em 他是一个相对单位 em 相对于font-size进行调整 */
 
+            /* 它先去自己内部找font-size如有那么就乘以当前font-size的值 */
 
+            /* 如果自己没有font-size那么就往上找 */
 
+            /* width: 20em;
 
+            height: 20em;
 
+            border: 1px solid black; */
 
+        /* } */
 
+
 
+        .box{
 
+            /* rem 也是相对单位 它是相对于html的font-size */
 
+            width: 2rem;
 
+            height: 2rem;
 
+            border:1px solid black;
 
+        }
 
+        
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="div1">
 
+        <div class="box">
 
+            hello world
 
+        </div>
 
+    </div>
 
+    <script>
 
+        // window.onpageshow = function(){
 
+        //     var htmlWidth = document.documentElement.getBoundingClientRect();
 
+        //     setTimeout(function(){
 
+        //         document.documentElement.style.fontSize = htmlWidth/7.5+"px";
 
+        //         console.log(document.documentElement.style.fontSize)
 
+        //     },1000)
 
+        // }
 
+        // window.onresize = function(){
 
+        //     var htmlWidth = document.documentElement.getBoundingClientRect();
 
+        //     document.documentElement.style.fontSize = htmlWidth/7.5+"px";
 
+        // }
 
+
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 20 - 0
8_移动端/3_max&min.html
Ver Ficheiro 

@@ -0,0 +1,20 @@
 
+<!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: 500px; */
 
+            /* max-width: 500px; */
 
+            min-width: 500px;
 
+            height: 500px;
 
+            background-color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 30 - 0
8_移动端/4_等比缩放.html
Ver Ficheiro 

@@ -0,0 +1,30 @@
 
+<!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;
 
+        }
 
+        .div1{
 
+            width: 100%;
 
+            height: 100px;
 
+            background-color: red;
 
+            float: left;
 
+        }
 
+        .div2{
 
+            width: 400px;
 
+            height: 100px;
 
+            background-color: blue;
 
+            float: left;
 
+            margin-left: -100%;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="div1"></div>
 
+    <div class="div2"></div>
 
+</body>
 
+</html>

+ 18 - 0
8_移动端/5_calc.html
Ver Ficheiro 

@@ -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{
 
+            height: 100px;
 
+            background-color:red;
 
+            width: calc(100% - 300px);
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 26 - 0
8_移动端/rem.js
Ver Ficheiro 

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