CSS - 物理像素和设备像素比等概念 🚴‍♂️

物理像素（physical pixels）和设备像素比（device pixel ratio, DPR），这些概念与设备显示器的分辨率和CSS像素的渲染方式有关

1. 物理像素（Physical Pixels）

物理像素是显示器实际能够显示的最小单位。显示器的分辨率通常以物理像素的宽度和高度来描述，例如 1920x1080。这表示显示器有 1920 个物理像素的宽度和 1080 个物理像素的高度

2. CSS 像素（CSS Pixels）

CSS 像素是用于网页布局和设计的单位。在不同的设备上，CSS 像素的实际大小可以不同。CSS 像素和物理像素之间的关系由设备像素比（DPR）决定

3. 设备像素比（Device Pixel Ratio, DPR）

设备像素比是物理像素和CSS像素之间的比例关系。DPR 定义为每个 CSS 像素包含的物理像素数量。例如，如果 DPR 为 2，则每个 CSS 像素包含 2x2 个物理像素，总共 4 个物理像素

计算方式：

DPR = 物理像素\CSS 像素

  • 如果设备的宽度为 1080 个物理像素，并且在 CSS 中设置宽度为 360px，则 DPR 为： DPR = 1080/360 = 3

4. 高分辨率显示器（Retina 显示器）

高分辨率显示器（如苹果的 Retina 显示器）具有较高的 DPR。对于这些显示器来说，每个 CSS 像素由多个物理像素组成，以提供更清晰和更细致的图像

5. 媒体查询中的设备像素比

可以使用媒体查询来检测和响应不同的 DPR，从而针对不同分辨率设备优化网页设计

/* 针对 DPR 为 1 的设备 */
@media only screen and (min-resolution: 96dpi) {
  body {
    font-size: 16px;
  }
}

/* 针对 DPR 为 2 的设备 */
@media only screen and (min-resolution: 192dpi) {
  body {
    font-size: 14px;
  }
}

6. 使用 window.devicePixelRatio

在 JavaScript 中，可以使用 window.devicePixelRatio 来获取设备的 DPR

console.log(window.devicePixelRatio); // 输出该设备的 DPR，例如 2

7. 图片优化

为不同 DPR 提供合适分辨率的图片，可以确保图片在高分辨率显示器上显示清晰，而不会增加不必要的带宽消耗

使用 <img> 元素的 srcset 属性：

<img src="image-lowres.jpg" 
     srcset="image-lowres.jpg 1x, image-highres.jpg 2x" 
     alt="Example Image">

在这个示例中，浏览器会根据设备的 DPR 自动选择合适的图像

8. Viewport 和 DPR

设置 viewport 是响应式设计的重要部分，尤其是在移动设备上。可以使用 <meta> 标签来控制 viewport 的行为

<meta name="viewport" content="width=device-width, initial-scale=1.0">

9. DPR 对 CSS 和 JavaScript 的影响

DPR 不仅影响图像，还影响 CSS 和 JavaScript 的行为。对于 CSS，例如 border-width 和 box-shadow 等属性在高 DPR 设备上看起来可能会比低 DPR 设备上更细或更粗。因此，在设计时要考虑这些因素

10. 实践中的 DPR

为了在高分辨率设备上提供更好的用户体验，可以使用以下技术：

  • SVG: 使用 SVG 图像，它们是矢量图形，可以在任何分辨率下保持清晰
  • 图标字体: 使用图标字体（如 Font Awesome）代替位图图像
  • CSS 媒体查询: 使用媒体查询来调整不同分辨率下的样式

Comments

Leave a Comment