移動端適配知識梳理

屏幕適配是移動端開發中不可避免的一個問題，也是前端人員必須瞭解清楚的一個問題。

瞭解移動端的知識

viewport
viewport是用戶網頁的可視區域。手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，一般這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。
像素
css中的像素只是一個抽象的單位，早期的手機屏幕像素密度較低，一個css像素等於一個物理像素。可是隨着手機的屏幕像素密度愈來愈高，好比Retina，相同的手機尺寸，分辨率卻提升了一倍，這就意味着一樣大小的屏幕上，像素多了一倍，這時一個css像素是等於兩個物理像素的。
在移動端瀏覽器中，window對象有一個dpr屬性(設備物理像素和設備獨立像素的比例)，也就是說dpr=物理像素/獨立像素，因此在Retina屏幕中，dpr=2，看圖說話。

meta
在移動端開發時，咱們須要在頭部加上一句<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width：控制viewport的大小，能夠指定的一個值或者特殊的值，如device-width爲設備的寬度（單位爲縮放爲100%時的CSS像素）。

• height：和width相對應，指定高度。

• initial-scale：初始縮放比例，也便是當頁面第一次load的時候縮放比例。

• maximum-scale：容許用戶縮放到的最大比例。

• minimum-scale：容許用戶縮放到的最小比例。

• user-scalable：用戶是否能夠手動縮放。

移動端適配的幾種方案

rem
rem是指相對於根元素的字體大小的單位，咱們能夠經過設置html的字體大小就能夠控制rem的大小。
須要注意的是，字體的大小不要用rem，咱們能夠根據不一樣的dpr作相應的處理。
方法一
能夠用css3的媒體查詢@media，這種方法能夠適配大部分機型。

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

方法二
想要實現多終端適配，這裏推薦手淘團隊的lib-flexible庫，具體實現方法能夠參考https://github.com/amfe/artic...
方法三
css3的新單位vw，vh。1vw等於可視區寬度(屏幕的可視區域即佈局區域)的百分之一，1vh等於可視區高度的百分之一。惋惜這個單位目前還有不少瀏覽器不支持。

目前我知道的方法就這幾個，若是還有但願你們補充。