在现代 web 中,px 是一个距离单位,具有以下特性
- 相对性
- 近似性
- 与屏幕分辨率相关
- 与屏幕观看距离相关
- 面向用户观感进行优化
心智模型
- 1px 是在该设备下用户可见元素的最小单位
- 例如,一条细线
- 在高分辨率屏幕下,虽然物理上可以显示更小的元素,但是对用户友好对最小元素通常会大一些
参考 px 的定义
- 在 96dpi 的设备上,间隔一臂远,一个像素点看上去那么大
实际 px 的定义
- 结合该设备的分辨率及典型用户观看距离,定义 px 的大小(1px 等于多少个屏幕像素),使得用户观感尽量接近参考 px 定义
一些结论
- 1px 在不同设备上,绝对尺寸和对应的屏幕像素都是不一样的
- 别紧张!px 是以用户实际体验为标准设计的距离单位,只要大家(开发者和设备厂商)都向标准看齐,那么可以期望,同一套样式设计,在不同设备的典型场景下用户观感会非常接近
网友评论