移動Web開發

網頁適配

流式佈局：就是百分比佈局，非固定像素，內容向兩側填充，理解成流動的佈局，稱爲流式佈局
視覺窗口：viewport是移動端特有。這是一個虛擬的區域，承載網頁的。
承載關係：瀏覽器---->viewport---->網頁

適配要求：

網頁寬度必須和瀏覽器保持一致
默認顯示的縮放比例和PC端保持（縮放比例1.0）
不允許用戶自行縮放網頁

滿足這些要求達到了適配，國際上通用的適配方案，標準的移動端適配方案。

適配設置：

如果任何設置都沒有，默認走的就是viewport的默認設置。

可以手去設置新的viewport設置,達到適配要求。
<meta name="viewport"> 設置視口的標籤在head裏面並且應該緊接着編碼設置

viewport的功能：

width 可以設置寬度 (device-width 當前設備的寬度)
height 可以設置高度
initial-scale 可以設置默認的縮放比例
user-scalable 可以設置是否允許用戶自行縮放
maximum-scale 可以設置最大縮放比例
minimum-scale 可以設置最小縮放比例

在<meta name="viewport" content="" > content=""使用以上參數

width=device-width 寬度一致比例是1.0
initial-scale=1.0 寬度一致比例是1.0
user-scalable=no 不允許用戶自行縮放（yes，no 1,0）

標準適配方案：

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">

meta:vp + tab 快捷方式

非主流的適配方案

頁面的真實尺寸會比在設備的上尺寸要大幾倍
假設設備是iphone4 -> 320px -> 網頁尺寸640px
縮放操作，有2倍的有3倍和屏幕像素比有關係
什麼是屏幕像素（物理像素，像素點） px(頁面的尺寸單位)
1. 物理像素是設備顯示屏的最小可視顆粒的大小以前的手機（直板手機）
2. 現在有高清顯示屏視網膜屏 retina屏,顯示的效果就提高了更細膩，但是在顯示同等質量的圖片的時候（模糊效果）
在屏幕像素比（一個px寬的屏幕能放幾個物理像素）高的設備圖片（非矢量）顯示會模糊
提高網頁的清晰度根據屏幕的像素比來縮放網頁
但是這樣的適配方案成本非常高
一般的企業開發當中使用的還是標準化設置
在高清顯示屏當中：圖片可能會失真（模糊）

移動端Web開發工具

JS
一般不使用jquery,jQuery做了很多桌面瀏覽器的兼容問題特別是IE，但是移動端沒有IE瀏覽器

主流的瀏覽器：谷歌火狐（2016年停止了維護和更新） safari瀏覽器百度 360 qq …

特點：內核基本上都是 webkit 或者 blink 兼容 -webkit-
使用H5的api或者說使用一個叫做： zepto.js的庫（基於高版本瀏覽器開發）中文地址https://www.html.cn/doc/zeptojs_api/

CSS使用box-sizing: border-box;

移動端以流式佈局爲主
百分比佈局
非固定像素佈局
無法準確計算容器的尺寸

box-sizing.hmtl測試使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--標準設置-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            border: 20px solid pink;
            height: 1000px;
            /*防止內容溢出  不出現滾動條  提供用戶體驗*/
            /*取消時會出現滾動條*/
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<!--
1. 移動端以流式佈局爲主
2. 百分比佈局
3. 非固定像素佈局
4. 無法準確計算容器的尺寸
-->
<div class="box"></div>
</body>
</html>

基本CSS

/*=======reset css========*/
*,
*::before,
*::after{
    /*所有的標籤，和僞元素都選中*/
    margin: 0;
    padding: 0;
    /*移動端常用佈局是非固定像素*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*點擊高亮效果的清除*/
    tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
}
body{
    font-size: 14px;
    font-family: "Microsoft YaHei",sans-serif;
    color: #333;
}
ul,ol{
    list-style: none;
}
a{
    text-decoration: none;
    color: #333;
}
input,textarea{
    border: none;
    outline: none;
    /*不允許改變尺寸*/
    resize: none;
    /*元素的外觀  none沒有任何樣式*/
    -webkit-appearance: none;
}
/*=======common css========*/
.f_left{
    float: left;
}
.f_right{
    float: right;
}
.clearFix::before,
.clearFix::after{
	/*設置內容爲空*/
    content: "";
    /*佔位*/
    display: block;
    /*不可見*/
    visibility: hidden;
    /*高度爲0*/
    height: 0;
    /*高度爲0*/
    line-height: 0;
    /*清空*/
    clear: both;
}
.m_l10{
    margin-left:10px;
}
.m_r10{
    margin-right:10px;
}
.m_t10{
    margin-top:10px;
}
.m_b10{
    margin-bottom:10px;
}
/*使用精靈圖的公用樣式*/
[class^="icon_"],[class*=" icon_"]{
    background-repeat: no-repeat;
    background-image: url("../images/sprites.png");
    /*設置大小，2倍圖進行壓縮*/
    background-size: 200px 200px;
}

頁面佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <title>京東移動站-首頁</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--版心-->
<!--
1.最大寬度設置成了640px
2.設計稿psd的尺寸就是640px
3.目的：當設備的尺寸比設計稿不至於失真
4.640px的尺寸設計稿的原因：根據當前主要流行的設備尺寸有關係iphone4,4s 尺寸320px
5.750px的設計稿：參考原型iphone6 尺寸375px
6.最小寬度320px  保證最小的寬度320px不讓頁面錯亂
-->
<div class="jd_container">
    <!--頂部搜索-->
    <header class="jd_search">
        <div class="jd_search_box">
            <a href="#" class="red icon_logo"></a>
            <form action="#">
                <span class="icon_search"></span>
                <input type="search" placeholder="佔位符">
            </form>
            <a href="#" class="login">登錄</a>
        </div>
    </header>
    <!--輪播圖-->
    <div class="jd_banner">
        <ul>
            <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l2.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l3.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l4.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l5.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l6.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l7.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
        </ul>
        <ul>
            <li class="now"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!--導航欄-->
    <nav class="jd_nav">
        <ul class="clearFix">
            <li><a href="#"><img src="images/nav0.png" alt=""><p>分類</p></a></li>
            <li><a href="#"><img src="images/nav1.png" alt=""><p>分類</p></a></li>
            <li><a href="#"><img src="images/nav2.png" alt=""><p>分類</p></a></li>
            <li><a href="#"><img src="images/nav3.png" alt=""><p>分類</p></a></li>
            <li><a href="#"><img src="images/nav4.png" alt=""><p>分類</p></a></li>
            <li><a href="#"><img src="images/nav5.png" alt=""><p>分類</p></a></li>
            <li><a href="#"><img src="images/nav6.png" alt=""><p>分類</p></a></li>
            <li><a href="#"><img src="images/nav7.png" alt=""><p>分類</p></a></li>
        </ul>
    </nav>
    <!--產品區塊-->
    <div class="jd_product">
        <section class="jd_product_box sk"><!--second kill-->
            <div class="tit nb">
                <div class="f_left">
                    <span class="icon"></span>
                    <span class="name">掌上描述</span>
                    <div class="time">
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                    </div>
                </div>
                <div class="f_right"><a class="m_r10" href="#">更多&gt;</a></div>
            </div>
            <div class="con">
                <ul class="pro clearFix">
                    <li>
                        <a href="#"><img src="images/detail01.jpg" alt=""></a>
                        <p class="nowPrice">&yen;10.00</p>
                        <p class="oldPrice">&yen;100.00</p>
                    </li>
                    <li>
                        <a href="#"><img src="images/detail02.jpg" alt=""></a>
                        <p class="nowPrice">&yen;10.00</p>
                        <p class="oldPrice">&yen;100.00</p>
                    </li>
                    <li>
                        <a href="#"><img src="images/detail01.jpg" alt=""></a>
                        <p class="nowPrice">&yen;10.00</p>
                        <p class="oldPrice">&yen;100.00</p>
                    </li>
                </ul>
            </div>
        </section>
        <section class="jd_product_box">
            <div class="tit"><h3>京東超市</h3></div>
            <div class="con clearFix">
                <a class="w_50p f_left br" href="#"><img src="images/cp1.jpg" alt=""></a>
                <a class="w_50p f_right bb" href="#"><img src="images/cp2.jpg" alt=""></a>
                <a class="w_50p f_right" href="#"><img src="images/cp3.jpg" alt=""></a>
            </div>
        </section>
        <section class="jd_product_box">
            <div class="tit"><h3>京東自營</h3></div>
            <div class="con clearFix">
                <a class="w_50p f_right bl" href="#"><img src="images/cp4.jpg" alt=""></a>
                <a class="w_50p f_left bb" href="#"><img src="images/cp5.jpg" alt=""></a>
                <a class="w_50p f_left" href="#"><img src="images/cp6.jpg" alt=""></a>
            </div>
        </section>
        <section class="jd_product_box">
            <div class="tit"><h3>京東熱門</h3></div>
            <div class="con clearFix">
                <a class="w_50p f_left br" href="#"><img src="images/cp1.jpg" alt=""></a>
                <a class="w_50p f_right bb" href="#"><img src="images/cp2.jpg" alt=""></a>
                <a class="w_50p f_right" href="#"><img src="images/cp3.jpg" alt=""></a>
            </div>
        </section>
    </div>
</div>

<script src="js/common.js"></script>
<script src="js/index.js"></script>
</body>
</html>

頁面CSS

body{
    background: #f5f5f5;
}
/*版心*/
.jd_container{
    min-width: 320px;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}
/*頂部搜索*/
.jd_search{
    width: 100%;
    height: 40px;
    /*fixed後不能居中*/
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
}
/*內容居中*/
.jd_search .jd_search_box{
    height: 40px;
    background: rgba(201,21,35,0.85);
    min-width: 320px;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.jd_search .jd_search_box .icon_logo{
    position: absolute;
    left: 10px;
    top: 4px;
    width: 60px;
    height: 36px;
    background-position: 0 -103px;
}
.jd_search .jd_search_box .login{
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
}
.jd_search .jd_search_box form{
    width: 100%;
    padding-left:70px;
    padding-right:50px;
    position: relative;
}
.jd_search .jd_search_box form .icon_search{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 80px;
    top: 10px;
    background-position: -60px -109px;
    /*縮放*/
    /*background:url(../sprites.png) no-repeat -60px -109px / 200px 200px*/
}
/*百分比的計算：基於父容器的內容的寬度*/
.jd_search .jd_search_box form input{
    width: 100%;
    height: 30px;
    margin-top:5px;
    background: #fff;
    border-radius: 15px;
    padding-left: 40px;
}
/*輪播圖*/
.jd_banner{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.jd_banner ul:first-child{
    width: 1000%;
    transform: translateX(-10%);
    -webkit-transform: translateX(-10%);
}
.jd_banner ul:first-child li{
    width: 10%;
    float: left;
}
.jd_banner ul:first-child li a{
    display: block;
    width: 100%;
}
.jd_banner ul:first-child li a img{
    display: block;
    width: 100%;
}
.jd_banner ul:last-child{
    position: absolute;
    width: 118px;
    height: 6px;
    left: 50%;
    margin-left:-59px;
    bottom: 6px;
}
.jd_banner ul:last-child li{
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 1px solid #fff;
    margin-left:10px;
    float: left;
}
.jd_banner ul:last-child li:first-child{
    margin-left:0;
}
.jd_banner ul:last-child li.now{
    background: #fff;
}
/*導航欄*/
.jd_nav{
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #ccc;
}
.jd_nav ul{
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.jd_nav ul li{
    width: 25%;
    float: left;
}
.jd_nav ul li a{
    display: block;
    width: 100%;
}
.jd_nav ul li a img{
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}
.jd_nav ul li a p{
    text-align: center;
    font-size: 12px;
    color: #666;
    padding: 5px 0;
}
/*產品區塊*/
.jd_product{
    padding: 0 5px;
}
/*產品盒子*/
.jd_product_box{
    margin-top: 10px;
    box-shadow: 0 0 2px #ccc;
    background: #fff;
}
.jd_product_box .tit{
    height: 34px;
    line-height: 34px;
    border-bottom: 1px solid #ddd;
}
.jd_product_box .tit.nb{
    border-bottom: none;
}
.jd_product_box .tit h3{
    font-weight: normal;
    position: relative;
    padding-left:23px;
}
.jd_product_box .tit h3::before{
    content: "";
    width: 3px;
    height: 12px;
    background: #d8505c;
    position: absolute;
    left: 10px;
    top: 11px;
}

/*秒殺*/
.sk .icon{
    width: 16px;
    height: 20px;
    float: left;
    margin-left:10px;
    margin-top:7px;
    background: url("../images/seckill-icon.png") no-repeat center/16px 20px;
}
.sk .name{
    float: left;
    margin-left:10px;
    font-size: 16px;
    color: #d8505c;
}
.sk .time{
    float: left;
    margin-left:10px;
}
.sk .time span{
    float: left;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background: #333;
    margin-left: 3px;
    margin-top:9px;
}
.sk .time span:nth-child(3n){
    background: #fff;
    width: 3px;
    color: #333;
}
.sk .pro{
    width: 100%;
    padding: 10px 0;
}
.sk .pro li{
    width: 33.3333%;
    float: left;
}
.sk .pro li a{
    display: block;
    border-right: 1px solid #ddd;
}
.sk .pro li:last-child a{
    border-right:none;
}
.sk .pro li a img{
    display: block;
    margin: 0 auto;
    width: 64%;
}
.sk .pro li p{
    text-align: center;
    font-size: 12px;
    padding: 5px 0;
}
.sk .pro li .nowPrice{
    color: #d8505c;
}
.sk .pro li .oldPrice{
    color: #666;
    text-decoration: line-through;
}

/*組合樣式的使用*/
.w_50p{
    width: 50%;
}
.w_50p img{
    display: block;
    width: 100%;
}
.bl{
    border-left:1px solid #ddd;
}
.br{
    border-right:1px solid #ddd;
}
.bb{
    border-bottom:1px solid #ddd;
}

移動Web開發--學習筆記一之佈局

移動Web開發

網頁適配

適配設置：

viewport的功能：

標準適配方案：

非主流的適配方案

移動端Web開發工具

頁面佈局

ArcGis-學習筆記6-5 外部Excel數據點導入

大數據 - MapReduce編程案例 -BH3

rem學習使用

Android通過藍牙與PC通信

ArcGis-學習筆記5 地圖可視化與出圖

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

linux以太網驅動總結