一些基本概念
視窗viewport
物理像素
設(shè)備像素症杏，它是顯示設(shè)備中的一個最微小的物理部件告组。每個像素可以根據(jù)操作系統(tǒng)設(shè)置自己的顏色和亮度卓鹿。
對于前端來說：假設(shè)設(shè)計稿為750px房揭。如果這個設(shè)備正好能完整顯示750px寬度的設(shè)計稿。那么設(shè)備像素或者稱物理像素就是750px挤安。但是可能這個設(shè)備的實際寬度就375px。
設(shè)備獨立像素
也稱密度無關(guān)像素丧鸯「蛲可以認為是計算機坐標系中的一個點，這個點代表一個可以由程序使用的虛擬像素（比如css像素）骡送，然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。
對于前端來說：比如ip6的設(shè)備獨立像素是375px
css像素
css像素是一個抽象的單位絮记。主要用在瀏覽器上摔踱。
對于前端來說：設(shè)計稿多少像素就是多少像素。
屏幕密度
指一個設(shè)備表面上存在的像素數(shù)量怨愤。一般是用一英寸有多少像素來計算（PPI）
設(shè)備像素比（device pixel ratio派敷，dpr）
設(shè)備像素比 = 物理像素/設(shè)備獨立像素
比如，iphone6的物理像素是750撰洗，設(shè)備獨立像素是375篮愉，那么它的dpr是2
在javascript中，可以通過window.devicePixelRatio獲取當(dāng)前設(shè)備的dpr
在css中差导，可以通過-webkit-device-pixel-ratio试躏，-webkit-min-device-pixel-ratio,-webkit-max-device-pixel-ratio來進行媒體查詢
檸檬俱樂部前端適配方案
以iPhone6為處理標準。
視覺稿的寬度為750px
把根元素html的font-size設(shè)置為50px设褐，這樣1rem=50px(設(shè)為50是為了便于計算)
html{font-size:50px;}
那么頁面的寬度為15rem
以這樣的規(guī)則去計算頁面各元素的寬高
比如一個圖片的寬高為100*100
那么樣式寫為
img{width:2rem; height:2rem;}
即以iphone6為基準計算出各元素的rem颠蕴。
前端適配
關(guān)于字體大小的處理，用了以設(shè)備獨立像素為判斷準則的媒體查詢
@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
}
}
在以上媒體查詢處理中助析，對應(yīng)寬度下的根元素html都設(shè)置了不一樣的font-size
比如當(dāng)width為550px的時候犀被，font-size為36px。那么在這樣的情況下外冀，剛剛在上面舉例的那個img元素在頁面寬度為550px的情況下顯示出來的真是寬度應(yīng)該是72px寡键。
這個方案里，處理方式與dpr無關(guān)
這個方案的缺點是雪隧，用媒體查詢?nèi)Q定html的font-size西轩，在這樣的情況下，計算是不精確的脑沿，只能保證大體上按比例正常顯示頁面遭商。這樣并不是完全按照以iphone6為基準的按比例計算。
比如捅伤，550px頁面寬度的時候劫流，font-size，如果按照比例來說應(yīng)該是50/750*550約等于36.67
600px頁面寬度的時候，font-size應(yīng)該為40px
而按照這套方案來看頁面寬度為540px至719px的時候font-size都為36px
這只能保證在某范圍內(nèi)大致的展示祠汇，并不精確仍秤，而這個大致的值的選取也是各有各的看法。
所以可很，以上代碼中給出的11個范圍下的font-size不一定是合適的诗力，這11個width范圍也不一定合適，實際有可能不需要這么多我抠，所以找出這些個范圍苇本，以及每個范圍最合適的font-size也很麻煩。
網(wǎng)易的適配方案
首先網(wǎng)易使用的是640px的設(shè)計稿
應(yīng)該是以iphone4或者iphone5為基準來設(shè)計的
網(wǎng)易用來算rem的基準是100
所以當(dāng)寬度是640px=6.4rem
網(wǎng)易的適配方案中菜拓，動態(tài)計算了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纳鼎，然后動態(tài)計算html的font-size
如果采用這種方法俺夕，注意
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
因為這個方法與dpr無關(guān)，只是根據(jù)設(shè)備獨立像素來計算了當(dāng)前的基準font-size
lib-flxible 前端開發(fā)終端適配方案--手淘的適配方案
手淘的lib-flexible庫
<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script>
實現(xiàn)思路
執(zhí)行這個js后贱鄙，會在html（也就是document.documentElement）上增加一個data-dpr屬性劝贸，以及font-size樣式。頁面初始時會給meta的viewport動態(tài)的給定scale
之后頁面中的元素逗宁，都可以用rem單位來設(shè)置映九。html上的font-size就是rem的基準像素。
flexible將設(shè)計稿分成100份瞎颗，即100a氯迂，10a=1rem。
比如言缤，頁面寬度為750px嚼蚀，那么一份為75px，1rem=75px管挟。
這樣將html的樣式設(shè)置為
<html style='font-size:75px;'>
font-size的計算方法：根元素html的font-size的計算方式是物理像素/10轿曙。
所以它的計算方式是與dpr有關(guān)，也就能比較精確的計算出當(dāng)前寬度下的根元素html的font-size僻孝。能保證比較精確的按比例去展示頁面导帝。
比如iphone 6 plus，其dpr為3穿铆，設(shè)備獨立像素為414您单，所以，在iphone 6 plus下荞雏，html的font-size應(yīng)該為虐秦，414*3/10=124.2px
字體大小不用rem平酿，而是根據(jù)dpr來設(shè)置px
div{font-size:12px;}
[data-dpr='2']div{font-size:24px;}
[data-dpr='3']div{font-size:36px;}
如果在，meta viewport中手動設(shè)置了initial-dpr悦陋，那么不管js獲取到的dpr是多少蜈彼，都會強制認為dpr是手動設(shè)置的值
所以不建議手動設(shè)置dpr的值
切圖（這里指的圖真的是圖，需要被縮放的）的時候俺驶，要放大1.5倍切幸逆，因為現(xiàn)在市面上也有不少像魅藍note這種超高清屏幕，devicePixelRatio已經(jīng)達到3了暮现，這個切圖保證在所有設(shè)備都清晰顯示还绘。
