移動端適配簡單總結

　　移動端佈局讓人費解的就是他的自動適配各個不一樣屏幕尺寸，裏面有不少的概念，簡單坐下總結，以便之後忘記。

屏幕尺寸：就是屏幕對角線的長度。

css像素：就是咱們設計圖上的尺寸，單位px。又被叫作與設備無關的像素，簡稱DIPs，在普通屏幕下，一個css像素就是一個設備像素。

設備像素：又叫物理像素，就是手機的分辨率的一個點，好比ip6 750*1337，他的一個點就是一個物理像素 ，移動屏幕上的最小顆粒，設備定製出來，數量也不會變了，數量越可能是不是顆粒就越小呢，好像也更清楚，哈！

設備獨立像素：也叫密度無關像素是一個虛擬像素（相似css像素），由系統轉換爲物理像素，別不設備的寬高能夠理解爲設備獨立像素

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

 

佈局視口：layout viewport，獲取document.documentElement.clientWidth / Height，佈局視口就是有多大就是多大，會出現橫向滾動條，最理想的佈局視口大小就是理想視口，用戶就不用縮放了。

視覺視口：visual viewport，就是咱們能夠看到的區域，不算邊框，假如咱們能夠縮放圖片，咱們看到的圖片的區域變小了，那麼佈局視口和視覺視口的關係就是：當前縮放值 = 理想視口寬度 / 視覺視口寬度

理想視口：ideal viewport，就是分辨率，理想viewport的寬度等於移動設備的屏幕寬度，也就是寬度爲100%的效果。

使得佈局視口和理想視口寬度一致：<meta name="viewport" content="width=device-width">，content="width=device-width"這個就是爲了設置成理想視口

rem+媒體查詢：

***head中添加視口設置***
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
***設置根元素font-size***
html{
    max-width: 640px;
    margin: 0px auto;
    font-size: 100px;-----至關於1rem=100px/16px*100%=625%
}
****css媒體查詢適配*** 

@media only screen and (max-width: 414px){ html{ font-size: 64px; ----至關於1rem=64px/16px*100%=400% } } @media only screen and (max-width: 375px){ html{ font-size: 58px;-----至關於1rem=58px/16px*100%=362.5% } } @media only screen and (max-width: 360px){ html{ font-size: 56px; } } @media only screen and (max-width: 320px){ html{ font-size: 50px; } }
通常咱們拿到的圖紙（舉例）是375 640 750，取640爲例，設置其在不一樣設備下能夠完美顯示
經過上面的至關於能夠看出設備尺寸不一樣，1rem=的css像素也不一樣了，就能夠在不一樣的設備上有相同的佈局了，只不過相同的結構的寬高等相對比起來不同，這正是咱們要的。

 

 

經過js調控達到適配：
引入淘寶的適配js的flexible.js文件： https://github.com/amfe/lib-flexible/blob/master/src/flexible.js 

其實flexible首先動態改寫meta中的scale，使得永遠都是1:1，而後動態改寫dpr的值，最後動態改變font-size的值。
默認把設計稿分紅100分，每一份是1a，而且默認1rem = 10a，那麼1rem = 設計稿尺寸/100*10 = 設計稿尺寸/10 = 基準值 = html中font-size的值。
重點：先會用在理解，否則理解起來很費勁，在用的過程當中就懂概念了。