小编典典

究竟什么是设备像素比？

all

每篇关于移动网络的文章都提到了这一点，但我无法找到关于这个属性究竟测量什么的解释。
谁能详细说明这样的查询会检查什么？

@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

}

阅读 171

2022-07-09

共1个答案

小编典典

简短的回答

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

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

公式为：

$linres_p/linres_l$

在哪里：

$linres_p$ 是 物理线性分辨率

和：

$linres_l$ 是逻辑 线性分辨率

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

讨论

CSS“像素”甚至没有被定义为“某个屏幕上的一个图片元素”，而是作为视角 的非线性角度测量值
， $0.0213°$ 大约 $1/96$ 是一英寸的手臂长度。
来源： CSS 绝对长度

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

如果您被位图图像困扰，为了适应许多不同的设备像素比率，您应该使用CSS
媒体查询或HTML
图片元素为不同的设备组提供不同的资源集。将此与不错的技巧相结合，例如background- size: cover或显式设置background- size百分比值。

例子

#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 中的单位总是对 逻辑像素 进行操作。

矢量图形的一个案例

随着越来越多的设备类型出现，为所有设备类型提供足够的位图资源变得越来越棘手。在 CSS 中，媒体查询是目前唯一的方式，而在 HTML5
中，图片元素可以让您使用不同的来源进行不同的媒体查询，但支持仍然不是 100%，因为大多数 Web
开发人员仍然需要支持 IE11 一段时间 （来源： caniuse）。

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

2022-07-09