我一直有个疑惑: "iPhone 从 4 到 7，屏幕的清晰度有了多次质的提升, 但是，为何在 Chrome 的 Toggle Device Toolbar 中, iPhone 设备对应的像素却基本没有提升?"
今天在看 CSS The Missing Manual 的时候才明白是怎么回事?
CSS 像素与物理像素并不是一回事。在 iPhone 升级换代过程中，iPhone 单位空间内的物理像素点越来越多。 而 CSS 像素与物理像素并不是 1:1 的关系， 而是 1:N 的关系，随着屏幕升级，这个 N 在不断增大。
Device Pixel
设备像素。即，物理像素。
CSS Pixel
这实际上是逻辑像素。
试想，如果 device pixel 与 css pixel 是 1:1 的关系，那么对于如此高 device pixel 的 iphone 来说， 一个 10px 的字，很可能小到你看不清。之所以，我们会感觉 iphone 的屏幕很清晰，是因为一个 CSS 中使用的逻辑像素对应了 N 个 device pixel. 这样，即保证了文字能看清，也保证了非常高的清晰度。
例如，
- iphone 5 的物理像素为 640 x 1136px，而 CSS 逻辑像素数为 320 x 568px;
- iphone 6 的物理像素为 750 x 1334px, 而 CSS 逻辑像素数为 375 x 667px;
开发者还需要关注设备的物理像素么
我感觉不再需要，完全安装逻辑像素进行思考就可以了。
设计师给出的设计稿应该使用什么单位标注
我觉得应该是逻辑像素单位。至少我暂时想不出有什么弊端。
参考
- CSS The Missing Manual - When Is a Pixel Not a Pixel?
- 前端工程师需要明白的「像素」 - 简书
微信关注我哦 👍
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式