一尘不染

设备像素比例到底是多少？

css

关于移动网络的每篇文章都提到了这一点，但是我找不到任何地方可以确切解释此属性的确切含义。
任何人都可以详细说明这种查询会检查什么吗？

@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

}

阅读 502

2020-05-16

共1个答案

一尘不染

简短答案

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

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

公式为：

$linres_p / linres_l$

哪里：

$linres_p$ 是 物理线性分辨率

和：

$linres_l$ 是逻辑 线性分辨率

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

讨论区

CSS“像素”甚至没有定义为“某个屏幕上的一个像素”，而是定义为视角 的非线性角度测量值
，在手臂长度处 $0.0213°$ 大约 $1/96$ 为一英寸。

对于网页设计，这具有很多含义，例如准备高清图像资源并以不同的设备像素比率仔细应用不同的图像。您不想强迫低端设备下载高分辨率的图像，而只是在本地进行缩小。您也不想让高端设备升级低分辨率图像以获得模糊的用户体验。

如果您坚持使用位图图像，以适应许多不同的设备像素比率，则应使用CSSMediaQueries为不同的设备组提供不同的资源集。结合使用一些不错的技巧，例如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

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

2020-05-16