设备像素和CSS像素

设备像素和 CSS 像素

  • 设备像素又称为 物理像素, 是 "物理屏幕" 上真实存在的发光点，只有屏幕一经出厂就固定不会改变。
  • CSS 像素又称为 逻辑像素，是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素。

image-20220214210432658

image-20220214210634132

例如: iPhone3G / iPhone3GS 3.5英寸 / 逻辑像素 320 * 480 / 设备像素 320 * 480：

image-20220214210736175

iPhone4 / 4S 3.5英寸 / 逻辑像素 320 * 480 / 设备像素 640 * 960：

image-20220214210959633

image-20220214211019454

不同的逻辑像素在不同的物理物理屏幕显示的效果如下：

image-20220214211052605

也就是说 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 视网膜屏幕的手机上会粗一些。

参考资料

posted @ 2022-02-14 21:32  BNTang  阅读(95)  评论(0)  编辑  收藏  举报