移動端適配

百分比佈局,flex佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>百分比佈局,flex佈局</title>
    <style type="text/css">
        * {margin: 0; padding: 0;}
        a {text-decoration: none;}
        ul,li {list-style: none;}
        body {font-family: "Microsoft yahei";}
        #banner {width: 100%; height: 100px; border: 5px solid #fff; background: #f60; box-sizing: border-box; border-radius: 10px;}
        #tag {display: flex; flex-direction: row; justify-content: flex-start; width: 100%; height: 100px;}
        #tag div{width: 20%; height: 100px; border: 5px solid #fff; background: #fafafa; box-sizing: border-box; border-radius: 10px;}
        #advertisement {display: flex; flex-direction: row; justify-content: space-around; width: 100%; height: 100px;}
        #advertisement div{width: 30%; height: 100px; background: lightgreen; box-sizing: border-box; border-radius: 10px;}
        #bag {display: flex; flex-direction: row; justify-content: flex-start; width: 100%; height: 100px;}
        #bag .bag {height: 200px; border: 5px solid #fff; box-sizing: border-box; border-radius: 10px;}
        #bag .bag div { border: 5px solid #fff; box-sizing: border-box; border-radius: 10px;}
        #bag .column {display: flex; flex-direction: column; justify-content: flex-start; flex-grow: 2; background: lightblue;}
        #bag .column>div {width: 100%; height: 100px; background: #f60;}
        #bag .row {display: flex; flex-flow: row wrap; justify-content: space-between;flex-grow: 3; background: lightgreen; }
        #bag .row>div{width: 30%; height: 95px; background: #000; box-sizing: border-box;}
    </style>
</head>
<body>
    <div id="banner"></div>
    <div id="tag">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="advertisement">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="bag">
        <div class="column bag">
            <div></div>
            <div></div>
        </div>
        <div class="bag row">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <script type="text/javascript">

    </script>
</body>
</html>

固定寬度,不同設備改變縮放比例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <!-- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> -->
    <script>
    /*
            添加meta 縮放比例
     */
        var meta = document.createElement("meta"),
            screenW = window.screen.width,
            fixedW = 640,
            scale = screenW / fixedW,  //縮放比例
            headDom = document.getElementsByTagName('head')[0];
        meta.setAttribute('name','viewport');
        meta.setAttribute('content','width='+fixedW+', user-scalable=no, initial-scale='+scale+', maximum-scale='+scale+', minimum-scale='+scale+'');
        headDom.insertBefore(meta,headDom.children[0]);
    </script>
    <title>固定寬度,不同設備改變縮放比例</title>
    <style type="text/css">
        * {margin: 0; padding: 0;}
        a {text-decoration: none;}
        ul,li {list-style: none;}
        body {font-family: "Microsoft yahei";}
        #box {width: 400px; height: 720px; background: url('1.png');}
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">

    </script>
</body>
</html>

rem適配

a) 根據屏幕的分辨率動態設置html的文字大小，達到等比縮放的功能
b)保證html最終算出來的字體大小，不能小於12px
c) 在不同的移動端顯示不同的元素比例效果
d) html的font-size:20px 1rem = 20px
e) 把設計圖的寬度分成多少分之一，根據實際情況

通過koala 計算rem 根據設計圖的寬度 縮放比例 10~16

css/index.less  自動生成index.css

@rem:77rem;
* {margin: 0; padding: 0;}
a {text-decoration: none; color: black;}
ul,li {list-style: none;}
body {font-family: "Microsoft yahei";}
#banner {width: 100%; height: 560/@rem;}
#banner a {display: block; width: 100%; height: 100%;}
#banner a img {display: block; width: auto; height: 100%; margin: 0 auto; }
section {
    max-width: 770px;
    margin: 10/@rem auto;
}
section ul {
    position: relative;
    display: -webkit-flex;
    display: flex;

}
.rowLine:before {
    position: absolute;
    top: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid #ddd;
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    content: '';
}
section ul:after {
    position: absolute;
    left:0;
    bottom: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid #ddd;
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    content: '';
}
section ul li{
    position: relative;
    -webkit-flex: 1;
    flex: 1;
    font-size: 30/@rem;
    text-align: center;
    padding: 20/@rem 0;
}

section ul li:after{
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    transform: scaleX(0.5);
    border-right: 1px solid #f0f0f0;
    -webkit-transform: scaleX(0.5);
    content: '';
}
section ul li a {
    display: block;
}
section ul li a img {
    display: block;
    width: 80/@rem;
    height: 80/@rem;
    margin: 0 auto;
}

index.css

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script>
        var html = document.querySelector('html'),
            timer = null;

        // 頁面寬度改變  重新獲取width
        function changeRem(){
            // meta:vp 存在 直接getBoundingClientRect()獲取
            var width = html.getBoundingClientRect().width;
            /*if(width>540){ //限制最大寬度
                width = 540;
                // width2 = window.screen.width;
            }*/
            // 設置 初始字體大小
            html.style.fontSize = width/16 +"px";
        }
        function Time(){
            clearTimeout(timer);
            timer = setTimeout(function(){
                changeRem();
            },200)
        }
        changeRem();
        window.addEventListener('resize',function(){
            Time();
        })
        // 每次加載頁面時觸發 pageview
        window.addEventListener('pageview',function(e){
            /*
            爲了查看頁面是直接從服務器上載入還是從緩存中讀取，你可以使用 PageTransitionEvent 對象的 persisted 屬性來判斷。 如果頁面從瀏覽器的緩存中讀取該屬性返回 ture，否則返回 false
             */
            if(e.persisted){
                Time();
            }
        })

    </script>
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <title>rem適配</title>
</head>
<body>
    <div id="banner">
        <a href=""><img src="img/banner.jpg" alt=""></a>
    </div>
    <section>
        <ul class="rowLine">
            <li><a href=""><img src="img/1.png" alt=""><span>京東超市</span></a></li>
            <li><a href=""><img src="img/2.png" alt=""><span>全球購</span></a></li>
            <li><a href=""><img src="img/3.png" alt=""><span>服裝城</span></a></li>
            <li><a href=""><img src="img/4.png" alt=""><span>生鮮</span></a></li>
            <li><a href=""><img src="img/5.png" alt=""><span>京東到家</span></a></li>
        </ul>
        <ul>
            <li><a href=""><img src="img/6.png" alt=""><span>京東超市</span></a></li>
            <li><a href=""><img src="img/7.png" alt=""><span>全球購</span></a></li>
            <li><a href=""><img src="img/8.png" alt=""><span>服裝城</span></a></li>
            <li><a href=""><img src="img/9.png" alt=""><span>生鮮</span></a></li>
            <li><a href=""><img src="img/10.png" alt=""><span>京東到家</span></a></li>
        </ul>
    </section>
    <script type="text/javascript">
        /*
                                770px    10
            @rem:77rem;  ===> 設計圖寬度 / 縮放倍數

            線 多種方法.
                1.僞類
                2.div
                3.
         */
    </script>
</body>
</html>

橫豎屏

a)Window.orientation 
b)方向 豎屏 0 橫屏 90或-90
c)根據橫屏幕的切換執行不同的事情
d) 橫豎屏事件監聽 orientationchange

筆記

一、移動端適配
    1、爲什麼要做適配
        a)爲了適應各種移動端設備，完美呈現應有的佈局效果  
        b)各個移動端設備，分辨率大小不一致，網頁想鋪滿整個屏幕，並在各種分辨下等比縮放
    2、適配方案
        a)固定高度，寬度百分比適配-佈局非常均勻 適合百分比佈局   
        b)固定寬度，改變縮放比例適配-什麼情況都可以
        c)Rem適配
        d)像素比適配
    3、單位
        a)em根據元素自身的字體大小計算 元素自身 16px 1em=16px
        b)Rem R -> root 根節點( html ) 根據html的字體大小計算其他元素尺寸
    4、固定高度，寬度百分比適配
        a)根據設置的大小去設置高度，單位可以用px 百分比 auto 
        b)常用Flex佈局
        c)百分比寬度
    5、固定寬度，改變縮放比例適配
        a)設計圖的寬度就是網頁顯示的寬度
        b)改變視口的縮放比例
        c)頁面寬度固定死

百分比佈局,flex佈局

固定寬度,不同設備改變縮放比例

rem適配

橫豎屏

筆記

python gdal 安裝使用（Windows， python 3.6.8）

websocket 聊天室(及時通訊)

ajax分頁(易源數據api)

移動端多指事件

富文本編輯+fs操作文件+Buffer練習(頭像上傳功能)

移動端適配

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結