本节书摘来异步社区《高性能响应式Web开发实战》一书中的第2章，第2.2节，作者： 李光毅 责编： 杨海玲，更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2 CSS像素

上一节讲的像素密度和Web开发有什么关系？在我们编写样式代码时，常会用到另一个像素单位px。为了和设备像素区分开，我们把它称为CSS像素。如果说设备像素给我们的印象是机械的、固定的、物理的，那么CSS像素将会是灵活的、虚拟的、相对的。

为什么说它是相对的？

假设我在页面上画一个300 px宽度的块级元素。一般情况下，块级元素只相当于页面的部分宽度。如果使用浏览器的页面放大功能，10倍地放大页面，很快块级元素就会充满整个页面。但吊诡的是，此时我们既没有改变浏览器的宽度，也没有改变容器的样式宽度，那么浏览器为我们做了什么呢？它把每一个CSS像素的面积放大了，如图2-12所示。

CSS像素默认与系统分辨率下像素大小相等。那么，在标清设备中，一个CSS像素应该是与一个设备像素大小相等。但是，在高清设备或者用户缩放的过程中，一个CSS像素也可以大于或等于多个设备像素，如图2-13所示。

有关高清设备被诟病的问题，还有一个问题未被提及：假设在原生应用（注意，不是Web）的开发中，如果必须以设备像素为单位进行开发，那会是非常痛苦的一件事。以iPhone 3GS为参照，在3GS中，一个系统分辨率像素等于1个设备像素；在iPhone 4中，一个系统分辨率像素等于2个设备像素；在Galaxy S4中，一个系统分辨率像素等于3个设备像素；在iPhone 6 Plus中，一个系统分辨率像素等于2.46个设备像素。那么，如果一个按钮在iPhone 3GS中大小为100×100设备像素，在iPhone 4中大小就应该是200×200设备像素，在Galaxy S4中就应该是300×300设备像素，在iPhone 6 Plus中就应该是246×246设备像素。但是，我们实在无法为每一台设备根据它的设备像素准备如此多的素材。

我们希望有这么一种抽象的单位，只需告知手机它这个按钮或者素材占用几个这样的“抽象单位”，在显示时它就能自动缩放至合适的具体设备像素值。例如，iOS系统中的PT就是这样一个单位，当我们告诉它按钮占用的宽度是100×100 PT时，在iPhone 3GS中，它就意味着占用100×100的设备像素；在iPhone 4中，它就占用200×200设备像素。也就是说，系统会根据给出的PT值，再根据系统分辨率像素与设备像素的比值，换算出目标应该占用的大小。

上面所说的这种抽象单位称为与设备无关像素（device independent pixel）。

同理，CSS像素也是与设备无关像素。我们不用关心在不同设备上一个CSS像素会匹配多少个设备像素，浏览器会根据DPR为我们适配，在CSS基础上根据DPR做适当放大或者拉伸。但问题是，因为字体是矢量的关系，被放大后仍然足够清晰。而身为标量的图片则会变得模糊，因为拉伸状态下一个CSS像素需要横跨多个设备设备像素，每张图片上的单个像素信息仍然要被多个设备像素瓜分显示，自然就变得模糊起来。图2-12中对比的是同样CSS尺寸在高清和标清下的效果，很明显左侧的高清设备会显得更模糊。

为了解决高清设备中图片素材会变模糊的问题，需要为高清设备提供更大尺寸、细节更丰富的图片。此外，高清图片可以向下兼容，我们可以用CSS像素控制高清图片在标清设备上的大小，这样一张图片就走遍天下了，解决了响应式图片中的适配问题。可新的问题又出现了。

（1） 如何区分出高清设备和标清设备呢？如何为不同的设备提供不同的样式呢？

（2）如果用户在网络信息较差的手机*问网站我们仍然提供高清图片，这是否有失偏颇？能否做到为不同的设备，甚至为不同的网络环境，提供不同的图片素材？

这两个问题留到第5章解决。