為什么模擬器下iP6的分辨率為375*667而設(shè)計(jì)圖一般給750*1334？
PPI：每英寸內(nèi)有多少物理像素點(diǎn)（設(shè)備像素點(diǎn)），就是像素密度。標(biāo)準(zhǔn)PPI(160)：1個(gè)設(shè)備像素 對(duì)應(yīng)1個(gè)css像素，放大：1個(gè)css像素 對(duì)應(yīng)多個(gè)設(shè)備像素，縮?。?個(gè)設(shè)備像素 對(duì)應(yīng)多個(gè)css像素。
設(shè)備像素(物理像素)：一個(gè)設(shè)備像素是顯示器上最小的物理顯示單元，每臺(tái)設(shè)備的設(shè)備像素都有自己的顏色值和亮度值，大小是固定的，是不可變的；但也因?yàn)椴煌O(shè)備的設(shè)備像素大小不同，所以導(dǎo)致PPI不同。
css像素：css像素是web編程的概念，用于邏輯上衡量像素的單位，也就是我們做網(wǎng)頁(yè)時(shí)用到的像素，是抽象的，不是實(shí)際存在的。
設(shè)備獨(dú)立像素：計(jì)算機(jī)坐標(biāo)系統(tǒng)中的一個(gè)點(diǎn)，它代表可以由程序使用的虛擬像素（比如:css像素），然后由相關(guān)系統(tǒng)轉(zhuǎn)化為物理像素，雖然設(shè)備獨(dú)立像素可以被拉長(zhǎng)或者被壓縮，但不同設(shè)備上的正常獨(dú)立設(shè)備像素大小相同。
設(shè)備像素比(dpr)：它是由? 這臺(tái)設(shè)備的PPI／160(標(biāo)準(zhǔn)PPI)? 得到的，然后也等于設(shè)備像素(物理像素)/設(shè)備獨(dú)立像素，設(shè)備像素比就是 設(shè)備像素(物理像素)與設(shè)備獨(dú)立像素的轉(zhuǎn)換關(guān)系值，因?yàn)樵O(shè)備像素(物理像素)是固定的，那么設(shè)備像素比就決定了設(shè)備獨(dú)立像素的大小，我們可以通過(guò)js中window.devicePixelRatio來(lái)獲取設(shè)備像素比，也可以通過(guò)css中-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio進(jìn)行媒體查詢。
在標(biāo)準(zhǔn)普通屏PPI（160）下，設(shè)備像素比為1:1，1個(gè)設(shè)備像素(物理像素)對(duì)應(yīng)1個(gè)css像素。
位圖像素：一個(gè)位圖像素是柵格圖像（如:jpg,png,gif等）最小的數(shù)據(jù)單元，每一個(gè)位圖像素包含著自身的顯示信息（如顯示位置，顏色值，透明度）
flexible做了什么事情：它會(huì)根據(jù)不同設(shè)備給html添加不同的data-dpr值，font-size值，<meta name="viewport">標(biāo)簽。我們?cè)儆胷em為單位來(lái)設(shè)置大小，rem是根據(jù)html的font-size值做相應(yīng)計(jì)算的，從而實(shí)現(xiàn)適配效果。它只對(duì)ios設(shè)備進(jìn)行判斷，安卓始終認(rèn)為dpr為1。font-size值它是如何確定的呢？目前Flexible會(huì)將視覺(jué)稿分成100份(為了以后更好兼容vh和vw)，每一份被稱為一個(gè)單位a，同時(shí)1rem單位被認(rèn)定為10a，(iphone6下)那么750px＝10rem，1rem = 75px，于是將html的font-size設(shè)為75px。它這樣做效果？動(dòng)態(tài)設(shè)置html的font-size與rem結(jié)合完成了前端不同大小屏幕的適配；根據(jù)dpr動(dòng)態(tài)設(shè)置<mate>標(biāo)簽是考慮到retina屏幕，我們采用750*1334設(shè)計(jì)稿設(shè)計(jì)時(shí)就已經(jīng)完成了對(duì)iphone6(dpr=2)的高清自適應(yīng)適配(我們的css像素實(shí)際用到了750，只不過(guò)縮小到了375，這就實(shí)現(xiàn)了高清,高清的概念有兩個(gè)：1個(gè)設(shè)備像素對(duì)應(yīng)1個(gè)css像素，PPI密度越高越好)。
圖片怎么適配高清？我們把div容器用兩倍的css設(shè)備獨(dú)立像素再進(jìn)行縮放0.5使dpr為2的手機(jī)屏幕下 1個(gè)設(shè)備像素對(duì)應(yīng)1個(gè)css像素 達(dá)到高清，圖片有位圖像素，若容器50*100，那么圖片原圖大小需要100*200，然后img標(biāo)簽的話直接給img設(shè)置width:50px;height:100px；background-image的話設(shè)置background-size：contain即可。但在普通屏幕下有缺點(diǎn)1、下載2倍圖片浪費(fèi)資源；2、圖片由于downsampling，會(huì)失去了一些銳利度(或是色差)。解決方案：準(zhǔn)備兩套不同尺寸圖片，不同dpr下加載不同尺寸圖片這需要我們自己根據(jù)dpr去適配，不同drp下的font-size大小不同，我們只需要上傳一張@2的圖片到服務(wù)器，一般好的服務(wù)器是可以縮略圖片的 ?如_50w_100h 。
border: 1px：在iphone的retina屏幕下，寫(xiě)border: 1px solid #ccc并沒(méi)問(wèn)題，本身會(huì)經(jīng)過(guò)flexible的縮小達(dá)到0.5。但安卓是沒(méi)有0.5的，最簡(jiǎn)單的hack：
字體大小問(wèn)題：對(duì)于頁(yè)面區(qū)塊的寬高我們可以對(duì)應(yīng)高清視覺(jué)稿，應(yīng)為視覺(jué)稿本來(lái)就x2了，對(duì)于字體怎么辦？我們希望在不同屏幕下看到的文本字號(hào)是相同的（不希望在retina屏幕下文本變?。硗庠诖笃潦謾C(jī)上看到更多文本。字體不能用rem，誤差太大，且不能滿足任何屏幕，我們可以用sass寫(xiě)一個(gè)mixin通過(guò)@media媒體查詢dpr設(shè)置不同字體大小 ?可以讓任何屏幕上字體大小統(tǒng)一。為什么字體用rem大小會(huì)誤差大，字體大小由行高和內(nèi)容區(qū)域高度決定，內(nèi)容區(qū)域高度和字號(hào)字體有關(guān)，在simsum(宋體)下，內(nèi)容區(qū)域高度=文字大小值，我們按在750*1334下的字體font-size設(shè)計(jì)，dpr=2下對(duì)font-size縮小一倍，會(huì)導(dǎo)致在retina屏幕下字體看起來(lái)?。ň唧w不清楚）。
理解一下：750的設(shè)備像素被分成100份，每10份＝1rem＝75px，我們寫(xiě)的px會(huì)被換算成rem，這里的750px為設(shè)備像素，但我們寫(xiě)的css像素其實(shí)的確是375px，但flex會(huì)判斷出我們的dpr把我們的<mate name="viewport">里的參數(shù)值寫(xiě)成1/dpr，把我們寫(xiě)的css像素進(jìn)行縮放成1/dpr，在普通屏幕下字體正常的但在retina屏下會(huì)縮小，所以我們寫(xiě)750px也剛好被縮放成375px，所以我們?cè)谀玫絛ata-dpr后還要對(duì)字體做適配，或者直接用750設(shè)計(jì)稿里的px不進(jìn)行轉(zhuǎn)換rem（那么與750px的畫(huà)布分配無(wú)關(guān)，）
retina屏幕：普通屏幕下(PPI=160,dpr=1:1)，1個(gè)css像素 對(duì)應(yīng)1個(gè)物理像素(1:1)；retina屏幕下(像iphone6 dpr為2:1時(shí))，1個(gè)css像素 對(duì)應(yīng)4個(gè)物理像素(1:4)，不同屏幕下，css像素所呈現(xiàn)的大小是一定的，不同的是1個(gè)css像素所對(duì)應(yīng)物理像素個(gè)數(shù)。Ipone6的retina屏幕下，1個(gè)設(shè)備獨(dú)立像素對(duì)應(yīng)4個(gè)物理像素，由于單個(gè)設(shè)備獨(dú)立像素不能分割只能就近取色從而導(dǎo)致圖片模糊，所以對(duì)于我們20*30的容器最好用40*60的的圖片，設(shè)計(jì)師給出的尺寸1334*750是因?yàn)榭紤]到iphone6的設(shè)備像素(物理像素)是1334*750，而它的獨(dú)立設(shè)備像素是667*375。
所以在開(kāi)發(fā)的時(shí)候都要按 設(shè)計(jì)圖紙尺寸/2，另外，一個(gè)pt容納2個(gè)px已經(jīng)是人眼視網(wǎng)膜分辨極限，再多人眼也識(shí)別不出了。
問(wèn)題？我們?cè)谠O(shè)備獨(dú)立像素375*667，設(shè)備像素(物理像素)(750*1334) 里做到高清是把與元素方塊的設(shè)備獨(dú)立像素按750*1334的高清稿進(jìn)行設(shè)計(jì)，然后再把他縮小0.5倍，讓750*1334的設(shè)備獨(dú)立像素顯示在375*667的原設(shè)備獨(dú)立像素里，使它的 設(shè)備獨(dú)立像素：設(shè)備像素＝1:1，但我們用到rem，你在html設(shè)置的font-size為畫(huà)布的1/10，也是1rem，那么rem都是相對(duì)于畫(huà)布的，你在750*1334里設(shè)置的120*100的元素大小在375*667里不就是60*50？那么rem用法與高清時(shí)需要將120*100的縮小一倍放在375*667的60*50的意愿不是違背了嗎？不是的，你用750*1334進(jìn)行設(shè)置時(shí)，10rem＝全屏＝750px，那么1rem=75px，html的font-size也會(huì)設(shè)置成75px，也就是說(shuō)我們的畫(huà)布是750px的，然后把它放在大小為原設(shè)備獨(dú)立像素375*667的方框里，我們的頁(yè)面大小仍是750*1334px（縮小后的設(shè)備獨(dú)立像素），只不過(guò)縮小在了375*667px（原設(shè)備獨(dú)立像素）的方框里。rem的作用只是為了適配不同屏幕大小，畫(huà)布大小我們是根據(jù)dpr進(jìn)行決定是否縮放，也根據(jù)dpr進(jìn)行計(jì)算html的font-size。
