移動端的適配及佈局

一. 像素

1. 屏幕分辨率
   指在橫縱座標的像素點，單位是 px，1px = 1 像素點
   iphone6 750*1334
   屏幕像素密度：屏幕上每英寸能夠顯示的像素點的數量
   屏幕分辨率，像素密度都是設備廠商規定的，不能修改

   
   

2. 像素
   物理像素：任何設備的物理像素的數量都是固定的，它是屏幕能顯示的最小粒度。
   CSS像素： CSS 像素是一個抽象的單位，主要用於瀏覽器肯定 Web 頁面的內容。
   在普通屏下，一個 CSS 像素對應一個設備像素

   CSS 像素與 物理像素的關係：

   1. 屏幕特性
      2. 用戶縮放的行爲

二. 視口

1. layout viewport(佈局視口)
   它是一個容器，用來裝下 PC 端的頁面
   默認的佈局視口都是 980， IE 是1024
   通常移動端的頁面有兩套方案，一是寫兩套頁面，一個是響應式佈局。
2. 視覺視口
   視覺視口與設備屏幕的區域同樣寬，像素值是 CSS 像素決定的。

3. 理想視口
   佈局視口的默認寬度並非一個理想的寬度，對於移動設備來講，最理想的狀況是用戶進入界面再也不進行縮放。只有專門爲移動設備開發的網站，纔有理想視口這麼一說

   <meta name="viewport" content="width=device-width"/>

   width：佈局視口的寬
   device-width：設備獨立像素的值

   當加上 meta，設備獨立像素 = CSS 像素 = 375

   沒有 meta：

   物理像素： 750
     設備獨立像素：375
     CSS 像素：980
     同一個元素，在不一樣的設備上，呈現的效果同樣，等比

   有 meta：

   物理像素： 750
     設備獨立像素：375
     CSS 像素：375
     同一個元素，在不一樣的設備上，呈現的效果不同，不等比

   dpr(像素比) = 物理像素/設備獨立像素

1. 移動端縮放：佈局視口永遠不變

   放大：CSS3 像素面積變大，元素像素值不變，視覺視口反而是變小了
     從技術層面上來說，縮放就是放大或縮小 CSS 像素面積的過程，改變的是視覺視口的尺寸。

三. 事件

1. 手指按下
ontouchstart
2. 手指移動
ontouchmove
3. 手指離開
ontouchend

取消瀏覽器的默認行爲
document.addEventListener("touchstart", function(event) {
    event.preventDefault()
})

移動端的準備工做：
    1. meta標籤
    2. 清除默認樣式
    3. 清除系統滾動條
    4. 取消默認行爲
    5. 適配
    6. 點透處理
                                                                                    

點透處理方案：
    1. 讓 a 元素不能進行跳轉，禁止瀏覽器的默認行爲
    2. box 盒子消失，點擊 a 元素，a 元素該去跳轉
    
    document.addEventListener("touchstart", function(){
        event.preventDefault()
    })
    
    var aTags = document.querySelectorAll('a')
    
    for (var i = 0;i < a.length;i++) {
        aTags[i].addEventListener("touchstart", function(){
            window.location.href = this.href
        })
    }

豎向滑屏

// 手指按下(父元素綁定事件) 

// 手指移動(不須要嵌套在按下事件中)

若是手指擡起來的時候沒有額外的動做，就不須要寫手指擡起事件

四. 適配

em: 參照自身的字體大小
rem：參照根元素的字體大小(html,默認16px)

rem 適配原理：

1. 頁面中的全部元素，單位都是 rem
2. 把整個屏幕的寬度設置成根元素的字體大小(1 rem = 375px)

var styleNode = document.createElement('style')

• rem 適配

圖紙較大，750，1080 頁面元素較多

• viewport 適配

設計圖紙較小 320

• 百分比適配

頁面比較少

• 媒體選擇器(響應式佈局)

在不一樣的屏幕上，頁面佈局不同

• 具體像素

dpr = 2 = 物理像素/CSS 像素