屏幕適配
在CSS中我們一般使用px作為單位乓土，需要注意的是琳钉，CSS樣式里面的px和物理像素并不是相等的纪他。CSS中的像素只是一個抽象的單位，在不同的設(shè)備或不同的環(huán)境中耻煤，CSS中的1px所代表的物理像素是不同的具壮。在PC端，CSS的1px一般對應(yīng)著電腦屏幕的1個物理像素哈蝇，但在移動端棺妓，CSS的1px等于幾個物理像素是和屏幕像素密度有關(guān)的。
首先：我們必須了解幾個概念炮赦，就是：Retina屏怜跑、物理像素、設(shè)備獨立像素吠勘、設(shè)備像素比
1.Retina屏
所謂“Retina”是一種顯示標(biāo)準(zhǔn)性芬，是把更多的像素點壓縮至一塊屏幕里，從而達(dá)到更高的分辨率并提高屏幕顯示的細(xì)膩程度剧防。由摩托羅拉公司研發(fā)批旺。最初該技術(shù)是用于Moto Aura上。這種分辨率在正常觀看距離下足以使人肉眼無法分辨其中的單獨像素诵姜。也被稱為視網(wǎng)膜顯示屏汽煮。Retina屏一般在蘋果公司的產(chǎn)品上用的比較多搏熄，諸如MacBook、iPad暇赤、iPhone等
2.物理像素(physical pixel)
物理像素又被稱為設(shè)備像素心例、設(shè)備物理像素，它是顯示器（電腦鞋囊、手機(jī)屏幕）最小的物理顯示單位止后，每個物理像素由顏色值和亮度值組成。所謂的一倍屏溜腐、二倍屏(Retina)译株、三倍屏，指的是設(shè)備以多少物理像素來顯示一個CSS像素挺益，也就是說歉糜，多倍屏以更多更精細(xì)的物理像素點來顯示一個CSS像素點，在普通屏幕下1個CSS像素對應(yīng)1個物理像素望众，而在二倍Retina屏幕下匪补，1個CSS像素對應(yīng)的卻是4個物理像素
3.設(shè)備獨立像素(device-independent pixel)
設(shè)備獨立像素是我們寫CSS時所用的像素，它是一個抽像的單位烂翰，主要使用在瀏覽器上夯缺，用來精確度量Web頁面上的內(nèi)容。
4.設(shè)備像素比(device pixel ratio)
設(shè)備像素比簡稱為dpr甘耿，物理像素與設(shè)備獨立像素的比例踊兜。
當(dāng)這個比率為1:1時，使用1個設(shè)備像素顯示1個css像素佳恬。當(dāng)這個比率為2:1=2時润文，使用4(22)個設(shè)備像素顯示1個css像素。當(dāng)這個比率為3:1=3殿怜，使用9(33)個設(shè)備像素顯示1個css像素。 這里要注意曙砂，dpr=2,并不是物理像素是設(shè)備獨立像素的2倍头谜，而是用4個物理像素去表示1個設(shè)備邏輯像素
應(yīng)該說1個設(shè)備獨立像素是1個物理像素的4倍！ｐ骸Ｖ妗！笑陈！际度，因為你4個網(wǎng)物理像素才代表我1個設(shè)備獨立像素
dpr只代表一個數(shù)字比例，不是倍數(shù)關(guān)系涵妥。
CSS的1px等于幾個物理像素乖菱，除了和屏幕像素密度dpr有關(guān)，還和用戶縮放有關(guān)系。例如窒所，當(dāng)用戶把頁面放大一倍鹉勒，那么CSS中1px所代表的物理像素也會增加一倍；反之把頁面縮小一倍吵取，CSS中1px所代表的物理像素也會減少一倍禽额。關(guān)于這點，以后的1px細(xì)線問題部分還會講到皮官。
px 與 rem 的選擇脯倒？
對于只需要適配少部分手機(jī)設(shè)備，且分辨率對頁面影響不大的捺氢，使用px即可 藻丢。
對于需要適配各種移動設(shè)備，使用rem讯沈，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備郁岩。
rem是相對于根元素的字體大小的單位，也就是html的font-size大小缺狠，瀏覽器默認(rèn)的字體大小是16px问慎，所以默認(rèn)的1rem=16px，我們可以根據(jù)設(shè)備寬度動態(tài)設(shè)置根元素的font-size挤茄，使得以rem為單位的元素在不同終端上以相對一致的視覺效果呈現(xiàn)如叼。
事實上 rem是把屏幕等分成 指定的份數(shù)，以20份為例穷劈，每份為 1rem 笼恰， 1rem 對應(yīng)的大小就是 rem基準(zhǔn)值 ，rem做的就是把 rem基準(zhǔn)值 給<html>的 font-size 歇终，所以如果設(shè)備的 物理像素 寬為 640px 社证，分成20份，那么 1rem=640px/20=32px , <html>的 font-size為32px 评凝。
//這段代碼放在head標(biāo)簽里面
<script>
(function () {
var html = document.documentElement;
function onWindowResize() {
html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
}
window.addEventListener('resize', onWindowResize);
onWindowResize();
})();
</script>
?
當(dāng)然追葡，你也可以分成30份，40份奕短，60份等等宜肉，這個看自己的喜好了
在我們實際切圖的時候，對于視覺稿上的元素尺寸換算翎碑，只需要元素的 原始的px值(即你量的大小) 除以 rem基準(zhǔn)值 即可谬返。例如設(shè)計稿的大小為640px， rem基準(zhǔn)值 = 640px/20 = 32px 日杈，有個元素的大小你量出來是 140px286px* 遣铝，那么換算過來就是：
140px = 140/32 = 4.375rem
286px = 286/32 = 8.9375rem</pre>
這樣我們就可以用rem來代替像素px了佑刷， 而且在所有的移動端都是自適應(yīng)的
這個方法目前是比較好的適配方法，只是rem在計算時很麻煩翰蠢，有很多小數(shù)项乒，這個時候大家可以試一下用less解決rem的小數(shù)問題
