设备像素比devicePixelRatio简单介绍

设备像素比（devicePixelRatio）定义了浏览器在渲染网页时使用的物理像素和CSS像素之间的比例。从概念上讲，设备像素比是一个浏览器显示器和一个真实显示设备之间的比例。例如，如果一个设备的屏幕的物理分辨率为1920x1080，设备像素比为2，那么浏览器将渲染CSS像素使得该分辨率如同960x540屏幕一样显示。

在使用高分辨率设备（如 Retina MacBook Pro）浏览网站时，由于设备像素比较高，可能会出现 CSS 像素与设备像素不对应，导致显示模糊、变形等问题。

在静态页面或简单页面中，我们可以使用像素值或者百分比作为尺寸来适应不同的设备，但是在响应式设计中，这种方法是不准确的。为了更好地适应高分辨率设备和不同屏幕尺寸，CSS提供了一些属性来帮助我们处理设备像素比。

像素密度相关属性

• devicePixelRatio：返回物理像素和逻辑像素的比率；
• resolution：定义输出设备（是一个点每英寸所拥有的像素数量）；
• min-device-pixel-ratio 和 max-device-pixel-ratio：通过这两个属性来匹配与设备像素比相关的样式表；
• min-resolution 和 max-resolution：通过这两个属性来匹配与输出设备分辨率有关的样式表。

这些属性可以在 CSS 中使用，以便根据设备像素比对页面进行优化。

像素比的实际应用

比如我们有一个设计稿是 750x1334 的 iPhone 6 的尺寸，我们需要用 CSS 实现它。若我们直接按照这个尺寸写但没有考虑设备像素比时，在其他设备上显示就会有问题。所以我们应该先计算出设计稿的设备像素比，然后再进行缩放和布局。

代码示例：

html {
  font-size: 100px;
}

@media screen and (min-width: 600px) {
  html {
    font-size: 150px;
  }
}

@media screen and (min-width: 800px) {
  html {
    font-size: 200px;
  }
}

@media screen and (min-width: 1000px) {
  html {
    font-size: 250px;
  }
}

@media screen and (min-width: 1200px) {
  html {
    font-size: 300px;
  }
}

在上面的示例中，我们使用了 @media 媒体查询，为不同设备分别设置了不同的 font-size 来适应设备像素比。在不同设备上，该代码段的输出将按比例正确缩放以适应实际的屏幕尺寸。

在开发响应式网站时，理解设备像素比的概念对于正确地适应各种不同设备和分辨率非常重要。因此，必须始终将设备像素比纳入考虑，并使用相关的 CSS 属性和技术来编写更高质量的响应式网站。