一些基本概念
視窗viewport
物理像素
設(shè)備像素，它是顯示設(shè)備中的一個(gè)最微小的物理部件。每個(gè)像素可以根據(jù)操作系統(tǒng)設(shè)置自己的顏色和亮度。
對于前端來說：假設(shè)設(shè)計(jì)稿為750px。如果這個(gè)設(shè)備正好能完整顯示750px寬度的設(shè)計(jì)稿。那么設(shè)備像素或者稱物理像素就是750px。但是可能這個(gè)設(shè)備的實(shí)際寬度就375px。
設(shè)備獨(dú)立像素
也稱密度無關(guān)像素?？梢哉J(rèn)為是計(jì)算機(jī)坐標(biāo)系中的一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素（比如css像素），然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。
對于前端來說：比如ip6的設(shè)備獨(dú)立像素是375px
css像素
css像素是一個(gè)抽象的單位。主要用在瀏覽器上。
對于前端來說：設(shè)計(jì)稿多少像素就是多少像素。
屏幕密度
指一個(gè)設(shè)備表面上存在的像素?cái)?shù)量。一般是用一英寸有多少像素來計(jì)算（PPI）
設(shè)備像素比（device pixel ratio，dpr）
設(shè)備像素比 = 物理像素/設(shè)備獨(dú)立像素
比如，iphone6的物理像素是750，設(shè)備獨(dú)立像素是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來進(jìn)行媒體查詢
檸檬俱樂部前端適配方案
以iPhone6為處理標(biāo)準(zhǔn)。
視覺稿的寬度為750px
把根元素html的font-size設(shè)置為50px，這樣1rem=50px(設(shè)為50是為了便于計(jì)算)
html{font-size:50px;}
那么頁面的寬度為15rem
以這樣的規(guī)則去計(jì)算頁面各元素的寬高
比如一個(gè)圖片的寬高為100*100
那么樣式寫為
img{width:2rem; height:2rem;}
即以iphone6為基準(zhǔn)計(jì)算出各元素的rem。
前端適配
關(guān)于字體大小的處理，用了以設(shè)備獨(dú)立像素為判斷準(zhǔn)則的媒體查詢
@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的時(shí)候，font-size為36px。那么在這樣的情況下，剛剛在上面舉例的那個(gè)img元素在頁面寬度為550px的情況下顯示出來的真是寬度應(yīng)該是72px。
這個(gè)方案里，處理方式與dpr無關(guān)
這個(gè)方案的缺點(diǎn)是，用媒體查詢?nèi)Q定html的font-size，在這樣的情況下，計(jì)算是不精確的，只能保證大體上按比例正常顯示頁面。這樣并不是完全按照以iphone6為基準(zhǔn)的按比例計(jì)算。
比如，550px頁面寬度的時(shí)候，font-size，如果按照比例來說應(yīng)該是50/750*550約等于36.67
600px頁面寬度的時(shí)候，font-size應(yīng)該為40px
而按照這套方案來看頁面寬度為540px至719px的時(shí)候font-size都為36px
這只能保證在某范圍內(nèi)大致的展示，并不精確，而這個(gè)大致的值的選取也是各有各的看法。
所以，以上代碼中給出的11個(gè)范圍下的font-size不一定是合適的，這11個(gè)width范圍也不一定合適，實(shí)際有可能不需要這么多，所以找出這些個(gè)范圍，以及每個(gè)范圍最合適的font-size也很麻煩。
網(wǎng)易的適配方案
首先網(wǎng)易使用的是640px的設(shè)計(jì)稿
應(yīng)該是以iphone4或者iphone5為基準(zhǔn)來設(shè)計(jì)的
網(wǎng)易用來算rem的基準(zhǔn)是100
所以當(dāng)寬度是640px=6.4rem
網(wǎng)易的適配方案中，動(dòng)態(tài)計(jì)算了html的font-size
deviceWidth=320，font-size=320/6.4=50px---即
320/640*100pxdeviceWidth=375，
font-size=375/6.4=58.5975px
以此類推的計(jì)算
通過document.documentElement.clientWidth取得deviceWidth，然后動(dòng)態(tài)計(jì)算html的font-size
如果采用這種方法，注意
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
因?yàn)檫@個(gè)方法與dpr無關(guān)，只是根據(jù)設(shè)備獨(dú)立像素來計(jì)算了當(dāng)前的基準(zhǔn)font-size
lib-flxible 前端開發(fā)終端適配方案--手淘的適配方案
手淘的lib-flexible庫
<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script>
實(shí)現(xiàn)思路
執(zhí)行這個(gè)js后，會在html（也就是document.documentElement）上增加一個(gè)data-dpr屬性，以及font-size樣式。頁面初始時(shí)會給meta的viewport動(dòng)態(tài)的給定scale
之后頁面中的元素，都可以用rem單位來設(shè)置。html上的font-size就是rem的基準(zhǔn)像素。
flexible將設(shè)計(jì)稿分成100份，即100a，10a=1rem。
比如，頁面寬度為750px，那么一份為75px，1rem=75px。
這樣將html的樣式設(shè)置為
<html style='font-size:75px;'>
font-size的計(jì)算方法：根元素html的font-size的計(jì)算方式是物理像素/10。
所以它的計(jì)算方式是與dpr有關(guān)，也就能比較精確的計(jì)算出當(dāng)前寬度下的根元素html的font-size。能保證比較精確的按比例去展示頁面。
比如iphone 6 plus，其dpr為3，設(shè)備獨(dú)立像素為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中手動(dòng)設(shè)置了initial-dpr，那么不管js獲取到的dpr是多少，都會強(qiáng)制認(rèn)為dpr是手動(dòng)設(shè)置的值
所以不建議手動(dòng)設(shè)置dpr的值
切圖（這里指的圖真的是圖，需要被縮放的）的時(shí)候，要放大1.5倍切，因?yàn)楝F(xiàn)在市面上也有不少像魅藍(lán)note這種超高清屏幕，devicePixelRatio已經(jīng)達(dá)到3了，這個(gè)切圖保證在所有設(shè)備都清晰顯示。
