定义
像素 Pixel
像素是图像的基本采样单位,他不是一个确定的物理量,像素的物理大小是不确定的。
位图像素
又称图像像素,是图像在保存为在计算机里时的最小数据单元,也就是说任意图片都是由无数位图像素组成,也就是使用ps放大图片到最后显示的那一个个小格子。
物理像素
图像像素无法确定,但设备在制作的时候必须有一个标准才能做,物理像素就是设备显示器的最小发光点。
设备独立像素
由于生产商的标准不同,物理像素也不近相同,但软件系统设计时却必须统一标准才行,于是定义了设备独立像素,又称密度无关像素,
他是计算机处理图像时使用的虚拟像素,比如 css 中的 px。
显然,设备独立像素是不能大于物理像素的。
设备像素比
设备像素比 = 物理像素 / 设备无关像素 单位: dpr
苹果公司研发的 retina屏幕 与普通屏幕的区别就在这里,
普通屏幕 dpr 为 1,而 retina屏幕 dpr 为 2,
也就是说
普通屏幕显示 图像像素时 一个物理像素表示一个设备独立像素,1:1
而 retina屏幕 显示图像时,4个个物理像(横2,纵2)素表示一个设备独立像素,这就是 retina屏幕细腻的原因所在。
分辨率
分辨率是屏幕像素的数量,一般以屏幕的宽(横向像素数量)乘以高(纵向像素数量)来表示,
分辨率又分为逻辑分辨率和物理分辨率,例如 iphone6 的逻辑分辨率:375 * 667.
但 iPhone 6 采用的是 retina屏幕,那显而易见 iphone 6 的物理分辨率为:750 * 1334.
所以为了保证清晰度,iphone 6 的产品设计图一般采用 750 * 1334 的分辨率。
下面就说说开发时市面上几种主流单位
px
即图片的基本采样单位,设备的逻辑像素,密度无关像素,设备独立像素。
rem
是 html 中 依据根元素字体大小计算的相对单位,一般在移动端开发中使用,具体方法为获取设备宽度动态设置根元素字体大小,来保证各种设备上显示效果一致。
em
html 中 依据父元素字体大小计算的相对单位。
rpx 小程序推荐单位
rpx 实际是 rem 的微信小程序各种设备适配解决方案,官方规定设备屏幕的宽度为 20rem,750rpx,即 1rem = 750 / 20 = 35rpx
对于 iphone 6 来说,750 / 750 = 1,即 1rpx 就是 1px。