设备像素比到底是什么？

2024-02-29

每一篇关于移动网络的文章都提到了这一点，但我找不到任何地方可以解释这个属性到底衡量什么。
任何人都可以详细说明这样的查询会检查什么吗？

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {

    //high resolution images go here

}

简短回答

设备像素比是物理像素与逻辑像素之间的比率。例如，iPhone 4 和 iPhone 4S 报告的设备像素比为 2，因为物理线性分辨率是逻辑线性分辨率的两倍。

物理分辨率：960 x 640
逻辑分辨率：480 x 320

公式为：

$res_p/res_l$

Where $res_p$ is the physical linear resolution, and $res_l$ is the logical linear resolution.

其他设备报告不同的设备像素比，包括非整数像素比。例如，诺基亚 Lumia 1020 报告 1.6667，三星 Galaxy S4 报告 3，苹果 iPhone 6 Plus 报告 2.46（来源：dpilove http://dpi.lv/)。但这原则上不会改变任何事情，因为您永远不应该为任何一种特定设备进行设计。

讨论

The CSS "pixel" is not even defined as "one picture element on some screen", but rather there is a reference pixel, which is a non-linear angular measurement of $0.0213°$ viewing angle. This is approximately $1/96$ of an inch. Source: CSS Absolute Lengths https://www.w3.org/TR/css3-values/#absolute-lengths

这对于网页设计有很多影响，例如准备高清图像资源以及在不同设备像素比下仔细应用不同的图像。您不想强制低端设备下载非常高分辨率的图像，而只是在本地缩小图像的尺寸。您也不希望高端设备升级低分辨率图像以获得模糊的用户体验。

如果您受困于位图图像，为了适应许多不同的设备像素比，您应该使用CSS 媒体查询 http://www.w3.org/TR/css3-mediaqueries/ or the HTML 图片元素 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture为不同的设备组提供不同的资源集。将此与一些不错的技巧结合起来，例如background-size: cover https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images或明确设置background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size为百分比值。

Example

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

这样，每种设备类型仅加载正确的图像资源。另请记住，pxCSS 中的单位always运行于逻辑像素.

矢量图形的案例

随着越来越多的设备类型出现，为所有设备类型提供足够的位图资源变得更加棘手。在CSS中，媒体查询是目前唯一的方式，而在HTML5中，图片元素 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture允许您对不同的媒体查询使用不同的来源，但支持仍然不是 100%，因为大多数 Web 开发人员仍然需要支持 IE11 一段时间（来源：caniuse http://caniuse.com/#search=picture).

如果您需要清晰的图标、线条艺术、设计元素图像不是照片，您需要开始考虑 SVG，它可以完美地适应所有分辨率。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css