简言 px

在现代 web 中，px 是一个距离单位，具有以下特性

• 相对性
• 近似性
• 与屏幕分辨率相关
• 与屏幕观看距离相关
• 面向用户观感进行优化

心智模型

• 1px 是在该设备下用户可见元素的最小单位
• 例如，一条细线
• 在高分辨率屏幕下，虽然物理上可以显示更小的元素，但是对用户友好对最小元素通常会大一些

参考 px 的定义

• 在 96dpi 的设备上，间隔一臂远，一个像素点看上去那么大

实际 px 的定义

• 结合该设备的分辨率及典型用户观看距离，定义 px 的大小（1px 等于多少个屏幕像素），使得用户观感尽量接近参考 px 定义

一些结论

• 1px 在不同设备上，绝对尺寸和对应的屏幕像素都是不一样的
• 别紧张！px 是以用户实际体验为标准设计的距离单位，只要大家（开发者和设备厂商）都向标准看齐，那么可以期望，同一套样式设计，在不同设备的典型场景下用户观感会非常接近

参考

• https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag