裝置畫素，每個裝置物理畫素出廠已經確定，固定不變
（1）px在螢幕上確定好不會隨網頁大小改變而改變，相對於一台裝置來說是固定的
（2）對各個螢幕顯示器解析度而言，px又是不同的，即相對的
（1）相對於根元素來設定大小
（2）用法：根元素設定字型大小，其他元素以rem為單位，谷歌瀏覽器預設字型大小為16px，則1rem = 16px
（3）rem適配：讓元素能在不同裝置上與螢幕大小的比值相同
var width = document.documentelement.clientwidth //獲取螢幕寬度
var htmlnode = document.queryselector('
html
') //
獲取html根元素
htmlnode.style.fontsize = width + '
px'
（1）子元素的em相對的是父元素的字型大小（與rem的不同），如下：
i am son
i am grandson
.father
.son /*font-size = 40px; width = 80px*/
.grandson /*width = 80px*/
所以em會繼承父元素font-size的大小，但會先檢視自己元素上是否有font-size
總之em根據font-size大小決定，並向上鄰近原則查詢font-size，而rem只相對根元素font-size來決定
總結：（1）rem使用的好處：響應式改變單位值很方便，**查詢只需改變根標籤font-size即可
（2）對於只需要適配少部分手機裝置，且解析度對頁面影響不大的，使用px即可 。
（3）對於需要適配各種移動裝置，使用rem，例如只需要適配iphone和ipad等解析度差別比較挺大的裝置
移動端DPR，物理畫素，邏輯畫素，PPI，物理尺寸
還是從具體的案例來去認識移動端中的各種定義吧。以最常見的設計圖參考iphone6來舉個栗子，詳細說。4.7in 2.3 4.1 in 16 9 375 667 dp 750 1334px 2.0 xhdpi 密度 4.7英吋 2.3 寬度 4.1 長度 英吋 高度 寬度 375 667 points...
怎麼理解物理畫素和CSS畫素？
很不理解這段話 後來隨著技術的發展，移動裝置的螢幕畫素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的retina屏，解析度提高了一倍，變成640x960，但螢幕尺寸卻沒變化，這就意味著同樣大小的螢幕上，畫素卻多了一倍，這時，乙個css畫素是等於兩個物理畫素的。還有乙個因素也會引起css中...
物理畫素與邏輯畫素相關概念
物理畫素dp physical pixel 邏輯畫素 裝置獨立畫素dip device independent pixels 裝置畫素比dpr device pixel ratio 螢幕畫素密度ppi pixel per inch 每英吋的畫素dpi dots per inch 1 物理畫素 phy...