ppi、dp、pt、px、dpr、vw、rem、em、物理像素、邏輯像素……懵就對了!css
明白結論說什麼的,可跳過此文android
如下物理大小單位爲 inch:ios
以一個例子來看這些名詞:iphone7 分辨率 750*1334,ppi 326,尺寸 4.7 inch,瀏覽器未縮放的視口大小 375*667,dpr 2瀏覽器
參照 ppi 可知:
物理像素的物理大小 = 設備物理大小/物理像素數 = 1/ppimarkdown
1dp 物理大小 = ppi/160 * 1物理像素物理大小 = ppi/160 * 1/ppi = 1/160 inch = 0.00625 inch = 0.015875 cm = 0.15875 mmiphone
1 css邏輯像素物理大小= dpr * 1物理像素物理大小 = dpr * 1/ppi
對於 iphone 來講,若是 dpr 是 2,1px = 2 * 1/326 = 0.006135 inch = 0.01558 cm = 0.1558 mm,跟 1dp 差很少spa
本文是看 h5 適配方案的副產品,最後提一下,根據以上推斷,可認爲:
當 ppi 和 dpr 正相關時,1 css邏輯像素物理大小不變,此時,css 邏輯 px 和 android dp 和 ios pt 相似
此時,h5 適配只須要根據視口大小調整 css 像素進行縮放(淘寶如今採用的方案?)code
對各類單位的理解一直比較模糊,今據搜索信息作點計算、推斷,若有錯誤請多指教。orm