设备像素和 CSS 像素
- 设备像素又称为
物理像素
, 是 "物理屏幕" 上真实存在的发光点,只有屏幕一经出厂就固定不会改变。 - CSS 像素又称为
逻辑像素
,是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素。
例如: iPhone3G / iPhone3GS 3.5英寸 / 逻辑像素 320 * 480 / 设备像素 320 * 480:
iPhone4 / 4S 3.5英寸 / 逻辑像素 320 * 480 / 设备像素 640 * 960:
不同的逻辑像素在不同的物理物理屏幕显示的效果如下:
也就是说 CSS 像素和设备像素在有的时候是不一样的,那么什么时候不一样?为什么不一样?在 PC 端,1个 CSS 像素往往都是对应着电脑屏幕的 1 个物理像素, 所以我们无需关心 PC 端的 CSS 像素和设备像素问题,在手机端,最开始其实 1 个 CSS 个像素也是对应着手机屏幕的 1 个物理像素, 但是后来一个改变世界的男人(乔布斯
)改变了这一切~, 从 iPhone4 开始,苹果公司推出了所谓的 retina
视网膜屏幕。iPhone4 的屏幕尺寸却没有变化,但是像素点却多了一倍,这就导致了在 1 个CSS个像素等于 1 个物理像素的手机上, 我们设置1个CSS像素只会占用 1 个物理像素,而在1个CSS个像素不等于1个物理像素的手机上, 我们设置1个CSS像素就会占用 2
个物理像素, 所以仔细观察你会发现同样是1像素但是在 retina
视网膜屏幕的手机上会粗一些。