移動端物理/css/位圖像素概念以及rem佈局的實現

這方面的知識一直只知其一;不知其二。從前看過一些文章，也沒有豁然開朗的感受。今天看了這篇http://div.io/topic/1092感受明白了一些，不管是否正確，先作記錄，留待往後驗證。

1. 物理像素、CSS像素與位圖像素

物理像素是設備自己用於渲染畫面的最小顯示單元。咱們平時買手機，好比iphone6或者華爲看到的720 * 1080, 1080 * 1920其實都是物理像素。顯然物理像素不等於PC前端開發所理解的屏幕寬度。

CSS像素是編程時使用的虛擬像素。個人理解是CSS像素是以屏幕寬度爲基準的。

若是視覺設計師以720畫布來設計，那麼設計稿中全部的尺寸基於物理像素，也就是說應該與物理像素成正比。前端編寫CSS代碼時，CSS代碼的值應該以屏幕尺寸爲基準等比設置。對於原生dpr是2的屏幕，1css像素點要用4物理像素點來表示。retina屏下1px的邊框，

其實設計師的初衷是1物理像素。可想而知對於程序員來講，應該要在css中實現0.5 CSS像素的邊框，這就是爲何設計師總以爲dpr=2的屏幕上1px的線很粗。

在淘寶的flexible解決方案中，設置data-dpr屬性以控制屏幕的縮放比例。實際上data-dpr的設置不會影響真實的window.devicePixelRatio的值。

位圖像素是處理高清圖片時用到的概念。當1物理像素能夠表示1位圖像素時，圖片清晰。咱們平時所說的x2倍的圖，是基於css像素的。因此基於css像素長寬都放大兩倍的圖，在retina下面轉換成物理像素就至關於1位圖像素對應1物理像素，就會清晰。

2. rem佈局

rem佈局的方式是設置html font-size。基準值計算：document.documentElement.clientWidth * dpr / 10. 編寫pxToRem函數。

佈局的原則是：視覺稿尺寸/物理像素 = css像素值 / 屏幕寬度。 因此css像素值 = 視覺尺寸 / 真實dpr.