移動端適配理解收集
移動端相應式測試網站：http://kuapingce.com/
http://www.cnblogs.com/Charliexie/p/6900640.html
https://segmentfault.com/a/1190000008767416
移動前端開發之viewport的深入理解
https://www.cnblogs.com/2050/p/3877280.html
http://www.jianshu.com/p/84c5cb3a485a
一些基本概念
視窗viewport
物理像素
設備像素，它是顯示設備中的一個最微小的物理部件。每個像素可以根據操作系統設置自己的顏色和亮度。
對於前端來說：假設設計稿為750px。如果這個設備正好能完整顯示750px寬度的設計稿。那麽設備像素或者稱物理像素就是750px。但是可能這個設備的實際寬度就375px。
設備獨立像素
也稱密度無關像素。可以認為是計算機坐標系中的一個點，這個點代表一個可以由程序使用的虛擬像素（比如css像素），然後由相關系統轉換為物理像素。
對於前端來說：比如ip6的設備獨立像素是375px
css像素
css像素是一個抽象的單位。主要用在瀏覽器上。
對於前端來說：設計稿多少像素就是多少像素。
屏幕密度
指一個設備表面上存在的像素數量。一般是用一英寸有多少像素來計算（PPI）
設備像素比（device pixel ratio，dpr）
設備像素比 = 物理像素/設備獨立像素
比如，iphone6的物理像素是750，設備獨立像素是375，那麽它的dpr是2
在javascript中，可以通過window.devicePixelRatio獲取當前設備的dpr
檸檬俱樂部前端適配方案
以iPhone6為處理標準。
視覺稿的寬度為750px
把根元素html的font-size設置為50px，這樣1rem=50px(設為50是為了便於計算)
html{font-size:50px;}
那麽頁面的寬度為15rem
以這樣的規則去計算頁面各元素的寬高
比如一個圖片的寬高為100*100
那麽樣式寫為
img{width:2rem; height:2rem;}即以iphone6為基準計算出各元素的rem。
前端適配
關於字體大小的處理，用了以設備獨立像素為判斷準則的媒體查詢
@media screen and (min-width:320px) {
html {
font-size: 21.33px
}
body {
font-size: 12px
}
}
@media screen and (min-width:360px) {
html {
font-size: 24px
}
body {
font-size: 12px
}
}
@media screen and (min-width:375px) {
html {
font-size: 25px
}
body {
font-size: 12px
}
}
@media screen and (min-width:384px) {
html {
font-size: 25.6px
}
body {
font-size: 14px
}
}
@media screen and (min-width:400px) {
html {
font-size: 26.67px
}
body {
font-size: 14px
}
}
@media screen and (min-width:414px) {
html {
font-size: 27.6px
}
body {
font-size: 14px
}
}
@media screen and (min-width:424px) {
html {
font-size: 28.27px
}
body {
font-size: 14px
}
}
@media screen and (min-width:480px) {
html {
font-size: 32px
}
body {
font-size: 15.36px
}
}
@media screen and (min-width:540px) {
html {
font-size: 36px
}
body {
font-size: 17.28px
}
}
@media screen and (min-width:720px) {
html {
font-size: 48px
}
body {
font-size: 23.04px
}
}
@media screen and (min-width:750px) {
html {
font-size: 50px
}
body {
font-size: 24px
}
}在以上媒體查詢處理中，對應寬度下的根元素html都設置了不一樣的font-size
比如當width為550px的時候，font-size為36px。那麽在這樣的情況下，剛剛在上面舉例的那個img元素在頁面寬度為550px的情況下顯示出來的真是寬度應該是72px。
這個方案裏，處理方式與dpr無關
這個方案的缺點是，用媒體查詢去決定html的font-size，在這樣的情況下，計算是不精確的，只能保證大體上按比例正常顯示頁面。這樣並不是完全按照以iphone6為基準的按比例計算。
比如，550px頁面寬度的時候，font-size，如果按照比例來說應該是50/750*550約等於36.67
600px頁面寬度的時候，font-size應該為40px
而按照這套方案來看頁面寬度為540px至719px的時候font-size都為36px
這只能保證在某範圍內大致的展示，並不精確，而這個大致的值的選取也是各有各的看法。
所以，以上代碼中給出的11個範圍下的font-size不一定是合適的，這11個width範圍也不一定合適，實際有可能不需要這麽多，所以找出這些個範圍，以及每個範圍最合適的font-size也很麻煩。
網易的適配方案
首先網易使用的是640px的設計稿
應該是以iphone4或者iphone5為基準來設計的
網易用來算rem的基準是100
所以當寬度是640px=6.4rem
網易的適配方案中，動態計算了html的font-size
deviceWidth=320，font-size=320/6.4=50px---即
320/640*100pxdeviceWidth=375，
font-size=375/6.4=58.5975px
以此類推的計算
通過document.documentElement.clientWidth取得deviceWidth，然後動態計算html的font-size
如果采用這種方法，註意
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">因為這個方法與dpr無關，只是根據設備獨立像素來計算了當前的基準font-size
lib-flxible 前端開發終端適配方案--手淘的適配方案
手淘的lib-flexible庫
<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script>實現思路
執行這個js後，會在html（也就是document.documentElement）上增加一個data-dpr屬性，以及font-size樣式。頁面初始時會給meta的viewport動態的給定scale
之後頁面中的元素，都可以用rem單位來設置。html上的font-size就是rem的基準像素。
flexible將設計稿分成100份，即100a，10a=1rem。
比如，頁面寬度為750px，那麽一份為75px，1rem=75px。
這樣將html的樣式設置為
<html style=‘font-size:75px;‘>font-size的計算方法：根元素html的font-size的計算方式是物理像素/10。
所以它的計算方式是與dpr有關，也就能比較精確的計算出當前寬度下的根元素html的font-size。能保證比較精確的按比例去展示頁面。
比如iphone 6 plus，其dpr為3，設備獨立像素為414，所以，在iphone 6 plus下，html的font-size應該為，414*3/10=124.2px
字體大小不用rem，而是根據dpr來設置px
div{font-size:12px;}
[data-dpr=‘2‘]div{font-size:24px;}
[data-dpr=‘3‘]div{font-size:36px;}如果在，meta viewport中手動設置了initial-dpr，那麽不管js獲取到的dpr是多少，都會強制認為dpr是手動設置的值
所以不建議手動設置dpr的值
切圖（這裏指的圖真的是圖，需要被縮放的）的時候，要放大1.5倍切，因為現在市面上也有不少像魅藍note這種超高清屏幕，devicePixelRatio已經達到3了，這個切圖保證在所有設備都清晰顯示。
作者：SuperSnail
鏈接：http://www.jianshu.com/p/84c5cb3a485a
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。
移動端適配理解收集