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/ppiiphone
1dp 物理大小 = ppi/160 * 1物理像素物理大小 = ppi/160 * 1/ppi = 1/160 inch = 0.00625 inch = 0.015875 cm = 0.15875 mmip
1 css逻辑像素物理大小= dpr * 1物理像素物理大小 = dpr * 1/ppi
对于 iphone 来讲,若是 dpr 是 2,1px = 2 * 1/326 = 0.006135 inch = 0.01558 cm = 0.1558 mm,跟 1dp 差很少rem
本文是看 h5 适配方案的副产品,最后提一下,根据以上推断,可认为:
当 ppi 和 dpr 正相关时,1 css逻辑像素物理大小不变,此时,css 逻辑 px 和 android dp 和 ios pt 相似
此时,h5 适配只须要根据视口大小调整 css 像素进行缩放(淘宝如今采用的方案?)产品
对各类单位的理解一直比较模糊,今据搜索信息作点计算、推断,若有错误请多指教。io