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

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

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

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

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

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

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

視覺視口：visual viewport，就是我們可以看到的區域，不算邊框，假如我們可以縮放圖片，我們看到的圖片的區域變小了，那麽布局視口和視覺視口的關系就是：當前縮放值 = 理想視口寬度 / 視覺視口寬度

理想視口：ideal viewport，就是分辨率，理想viewport的寬度等於移動設備的屏幕寬度

使得布局視口和理想視口寬度一致：<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的值。
重點：先會用在理解，不然理解起來很費勁，在用的過程中就懂概念了。

移動端適配簡單總結