59、高级 CSS 优化网站及移动样式设计全解析

高级 CSS 优化网站及移动样式设计全解析

1. 像素差异：设备像素与 CSS 像素

在网页设计中，像素是基本的度量单位，但存在设备像素和 CSS 像素两种类型。设备像素指屏幕上实际的物理像素，而 CSS 像素是 CSS 测量中的基本单位。

当缩放网页时，能更清晰地理解两者的差异。例如，以下样式创建了一个宽度为 300 CSS 像素的 aside 元素：

aside {
    width: 300px;
}

不过，该元素的设备像素宽度并非一定是 300。当用户放大网页时，用设备像素衡量的元素大小会增加，但 CSS 像素宽度仍为 300，这意味着 1 个 CSS 像素可能由多个设备像素表示，这种对应关系被称为设备像素比。例如，当页面放大 2 倍时，设备像素比为 2，即 1 个 CSS 像素由 2×2 的设备像素方块表示。

在为高设备像素比的显示屏优化网站时，设备像素和 CSS 像素的差异尤为重要。以配备 Retina 显示屏的 iPhone 4 为例，其每英寸设备像素密度可达 326 像素。为这类设备优化网站，设计师可创建两套样式表，一套用于低分辨率显示屏，另一套用于高分辨率显示屏。高分辨率样式表会加载细节丰富的高分辨率图像，而低分辨率样式表则加载更适合小设备像素比设备的低分辨率图像。例如，以下媒体查询会为设备像素比至少为 2 的高分辨率屏幕设备加载 retina.css 样式表文件：

<link href="retina.c