這方面的知識一直一知半解。從前看過一些文章，也沒有豁然開朗的感覺。今天看了這篇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.