1.為什么去學(xué)習(xí)移動web？
已經(jīng)從趨勢變成了一個主流了，互聯(lián)網(wǎng)的流量入口已經(jīng)大于PC端的流量入口
2.兼容性
在國內(nèi)的移動web瀏覽器，絕大部分都是基于webkit內(nèi)核的，所以一些css3效果，h5的新特性絕大部分都被支持，需要添加前綴。
（不同機(jī)型之間可能會略有不同，這個需要踩坑）
在移動端，做動畫一律用過渡配合2D轉(zhuǎn)換去實(shí)現(xiàn)
3.移動web對比PC布局的差異性
移動web的主要核心就是做自適應(yīng)的布局，在手持設(shè)備上基本都是通欄的，并且布局的細(xì)節(jié)比PC端少，文字內(nèi)容和模塊也相對偏少
4.流式布局
其實(shí) 流式布局 就是百分比布局。是移動web開發(fā)使用的常用布局方式之一
流式布局下的幾個頁面特征：
（1）寬度自適應(yīng)，高度寫死，不能百分百去還原設(shè)計圖
（2）一些小ICON 圖標(biāo)等都是寫死的 不是所有的東西都是自適應(yīng)的，一般都是模塊會呈現(xiàn)自適應(yīng)
（3）一些產(chǎn)品插入圖 也就是img等都默認(rèn)設(shè)置寬度百分百，讓其自動保持等比例縮放，一般不予寫死
（4）字體大小等都是寫死的（后期可以使用媒體查詢來改變字體大?。?br> 后期會學(xué)到rem結(jié)合流式布局的寫法：使用rem去計算高度，百分比去計算寬度，實(shí)現(xiàn)寬高完全自適應(yīng)。
移動端的幾個經(jīng)典的頁面模塊布局：
`
（1）左側(cè)固定 右側(cè)自適應(yīng)

 左側(cè)盒子固定，右側(cè)自適應(yīng) 
（1）左側(cè)盒子直接寫死寬高，并且浮動
（2）右側(cè)盒子直接不寫寬，直接用margin-left去擠出距離，這個盒子默認(rèn)會自動內(nèi)減

HTML結(jié)構(gòu)

  <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>

樣式

<style>
        /* 需求：左側(cè)固定 右側(cè)自適應(yīng)
        （1）左側(cè)盒子直接寫死寬高 并且浮動
        （2）右側(cè)盒子直接不寫width屬性，用margin-left去擠出左邊的距離出來
        
        一個沒有width屬性的標(biāo)準(zhǔn)流盒子，添加padding和margin是不會撐大盒子的實(shí)際寬度
         */

        .box {
            width: 100%;
            height: 300px;
        }
        .left {
            width: 100px;
            height: 300px;
            background-color: red;
            float: left;
        }
        .right {
            height: 400px;
            margin-left:110px;
            background-color: green;
        }

    </style>

（2）右側(cè)自適應(yīng)，左側(cè)固定

 右側(cè)盒子固定，左側(cè)自適應(yīng) 
（1）右側(cè)盒子直接寫死寬高，并且浮動
（2）左側(cè)盒子直接不寫寬，直接用margin-right去擠出距離，這個盒子默認(rèn)會自動內(nèi)減
（3）右側(cè)盒子在結(jié)構(gòu)上在左側(cè)盒子的前面，先浮動，后標(biāo)準(zhǔn)

樣式

<style>
        /* 需求：右側(cè)固定 左側(cè)自適應(yīng)
        （1）右側(cè)盒子直接寫死寬高 并且右浮動
        （2）左側(cè)盒子直接不寫width屬性，用margin-right去擠出右邊的距離出來
        （3）先浮后標(biāo)
        
        一個沒有width屬性的標(biāo)準(zhǔn)流盒子，添加padding和margin是不會撐大盒子的實(shí)際寬度
         */

        .box {
            width: 100%;
            height: 300px;
        }
        .right {
            width: 100px;
            height: 300px;
            background-color: red;
            float: right;
        }
        .left {
            height: 400px;
            margin-right:110px;
            background-color: green;
        }
    </style>

（3）圣杯布局

 兩側(cè)固定 中間自適應(yīng) 
（1）左右的盒子都寫固定的寬高，然后分別左浮動 右浮動
（2）中間的盒子直接用margin去擠出距離，不寫寬自動內(nèi)減
（3）右邊浮動在結(jié)構(gòu)（html里面）一定要放到標(biāo)準(zhǔn)流盒子的前面

<div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
  </div>

<style>
        .box {
            width: 100%;
            height: 300px;
        }
        .left,.right {
            width: 100px;
            height: 300px;
            background-color: red;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .center {
            height: 300px;
            background-color: green;
            margin:0 110px;
        }
    </style>

（4）中間固定，兩邊自適應(yīng)

 中間固定 兩側(cè)自適應(yīng) 
（1）中間盒子直接寫死寬高，并且定位居中
（2）左右側(cè)盒子直接width百分50%，并且浮動，并配合padding和內(nèi)減去實(shí)現(xiàn)自適應(yīng)

<div class="box">
        <div class="left">
            <div class="content"></div>
        </div>
        <div class="right">
            <div class="content"></div>
        </div>
        <div class="center">
            我是中間的內(nèi)容
        </div>
    </div>

<style>
        .box {
            width: 100%;
            height: 400px;
            position: relative;
        }
        .center {
            width: 100px;
            height: 400px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 0;
            transform:translateX(-50%);
        }
        .left,.right {
            width: 50%;
            height: 400px;
            float: left;
            background-color: green;
            -webkit-box-sizing:border-box;
            box-sizing:border-box;
        }
        .left {
            padding-right: 60px;
        }
        .right {
            padding-left: 60px;
        }
        .content {
            height: 400px;
            background-color: yellow;
        }

    </style>

（5）等分布局，就是百分比平分

Viewport（視口）

視口標(biāo)簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width: 100%;
            height: 300px;
            background-color: pink;
        }
        /* 將PC的頁面直接放到手機(jī)端：
        （1）沒有出現(xiàn)橫向滾動條
        （2）整個的界面縮小了
        （3）html的寬度永遠(yuǎn)是980，并沒有隨著屏幕的改變而改變 */
    </style>
</head>
<body>
    <div class="box">我是內(nèi)容！！！</div>
</body>
</html>

注意的小細(xì)節(jié): 通過模擬器加載的頁面盡量刷新一下
1.我們猜想下pc頁面在移動設(shè)備上顯示情況。
放不下出現(xiàn)橫向滾動條？還是自動縮放？
2.我們測試下pc頁面在移動設(shè)備上顯示。
默認(rèn)是縮放顯示的
3.認(rèn)識viewport
以前我們的頁面是直接丟到瀏覽器里面就直接運(yùn)行了，但是現(xiàn)在在移動端，默認(rèn)會給我們的頁面添加了一個中間層，就是頁面和瀏覽器中間會介入一個第三者，就是視口，也就是說視口會把頁面包裹起來然后在放到瀏覽器里面進(jìn)行渲染，而視口默認(rèn)的大小一般是980，會比手機(jī)的物理設(shè)備的尺寸要大，同時視口會自動縮小到手機(jī)的屏幕大小，這就是為什么一個PC端的頁面扔到移動端的話 理解的簡單一點(diǎn)就是在頁面外面包裹了一個默認(rèn)大小為980（絕大多數(shù)）的盒子，這個盒子具備scale功能，并且同時在默認(rèn)情況下會整體縮放（里面承載的網(wǎng)頁也縮小了）到當(dāng)前用戶手機(jī)的屏幕大小
這是視口標(biāo)簽最開始出來的意義，持續(xù)了一段時間，但是發(fā)現(xiàn)這種體驗(yàn)不太好，因?yàn)橐坏┛s小就會頁面就會很小看不清，一旦放大就會又看不完全。所以就有人開始做另一種手機(jī)網(wǎng)頁模式就是不讓視口標(biāo)簽去縮放，也不讓用戶去縮放，并且讓視口的寬度就等于當(dāng)前設(shè)備的寬度，就基于當(dāng)前的屏幕分辨率去設(shè)計專門的設(shè)計圖，針對差異不大的手機(jī)屏幕是采用自適應(yīng)技術(shù)
視口標(biāo)簽的參數(shù)：
width：寬度設(shè)置的是viewport寬度，可以設(shè)置device-width特殊值
initial-scale：初始縮放比，大于0的數(shù)字（縮放是基于屏幕來的）
maximum-scale：最大縮放比，大于0的數(shù)字
minimum-scale：最小縮放比，大于0的數(shù)字
user-scalable：用戶是否可以縮放，yes或no（1或0）；

用meta標(biāo)簽把viewport的寬度設(shè)為device-width，同時initial-scale=1，user-scalable = 0就構(gòu)建了一個標(biāo)準(zhǔn)的移動web頁面

配置標(biāo)準(zhǔn)化的視口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!-- 視口默認(rèn)是980的大小，會自動收縮頁面，收縮到當(dāng)前設(shè)備的大小，然后用戶可以通過手指去放大某一個細(xì)節(jié) -->

    <!-- 但是這個體驗(yàn)不太好，因?yàn)樾枰シ糯?，一旦放大就看不完全了，所以，我們需要配置一個標(biāo)準(zhǔn)的視口，這個時候的寬度就應(yīng)該和屏幕的寬度保持一樣大，縮放的比例保持1:1 并且不允許用戶在用手指去縮放 -->
    

    <!-- 生成語法： meta:vp tab鍵直接生成 -->

    <!-- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> -->


    <meta name="viewport"  content="width=device-width,initial-scale=1.0,
    user-scalable=no" >
    
    <!--
        width :  視口的寬度 默認(rèn)是980 我們可以進(jìn)行設(shè)置  device-width 表示的就是當(dāng)前設(shè)備的寬度
    
        initial-scale=1.0  視口的縮放比
        
        user-scalable=no  no或者yes   0或者1  允許或者禁止用戶去縮放頁面
        
        maximum-scale=1.0, minimum-scale=1.0 最大和最小的縮放比，這兩句話可加可不加

    -->
    
    <style>
        .box {
            width: 100%;
            height: 300px;
            background-color: red;
        }
    </style>

</head>
<body>
    <div class="box">111</div>
</body>
</html>

首頁切圖

注意事項(xiàng)：
一般設(shè)計圖都是640 或者750 甚至更大，我們不能直接用這樣的設(shè)計圖去量尺寸，因?yàn)楦叨炔粶?zhǔn)（除非量了之后手動去計算，但是會很麻煩），所以需要將設(shè)計圖縮放到320的大小下面去進(jìn)行量尺寸（但是真正的圖片元素還是在之前的原始設(shè)計圖下去切，因?yàn)檫@樣不會失真）
320僅僅是用來量高度的

關(guān)于精靈圖的縮放：
（1）得到縮放的比例 （原始設(shè)計圖/320）根據(jù)比例將精靈圖縮放 （代碼里面通過background-size去縮放）
（2）在獲取縮放后的精靈圖對應(yīng)的position
因?yàn)榫`圖都是根據(jù)原始設(shè)計圖的大小切出來的，所以，在流式布局里面使用精靈圖的都需要用background-size縮放，至于縮放的比例(用原始設(shè)計圖的分辨率/320)，縮放之后取得對應(yīng)圖片的background-position （千萬別真把精靈圖給縮放給保存了，我們縮放精靈圖僅僅是用來獲取縮放后的精靈圖的position）
沒有寬度的盒子寫padding不會撐大盒子
怎么設(shè)置：

1.png

2.png

如果1：1的顯示在移動設(shè)備當(dāng)中 圖標(biāo)會失真
在行業(yè)中通用的設(shè)計稿 640px或者750
目的 熟練的時候百分比布局
首頁的布局：是以百分比布局為主的 定最小寬度和最大寬度的布局。
適用：圖片比較多的首頁，門戶，電商 等。

移動端事件

Touch事件

• touchstart：當(dāng)手指觸碰屏幕時候發(fā)生。不管當(dāng)前有多少只手指

• touchmove：當(dāng)手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面，
  會調(diào)用event的preventDefault()可以阻止默認(rèn)情況的發(fā)生：阻止頁面滾動

• touchend：當(dāng)手指離開屏幕時觸發(fā)

• touchcancel：系統(tǒng)停止跟蹤觸摸時候會觸發(fā)。
  例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發(fā)該事件，這個事件比較少用
  觸摸事件的響應(yīng)順序
  1、ontouchstart
  2、ontouchmove
  3、ontouchend
  4、onclick 300ms延時

Event
originalEvent （原生事件） 是jquery 封裝的事件。
targetTouches 目標(biāo)元素的所有當(dāng)前觸摸
changedTouches 頁面上最新更改的所有觸摸，在touchend里面觸發(fā)，只有touchend的才可以獲取event手指坐標(biāo)
touches 頁面上的所有觸摸
注意：在touchend事件的時候event只會記錄changedtouches
`