css 什么是设备像素比？

crcmnpdw 于 2023-08-09 发布在其他

关注(0)|答案(5)|浏览(101)

每一篇关于移动的网络的文章都提到了这一点，但我找不到关于这个属性到底衡量了什么的解释。
有谁能详细说明一下像这样的查询是如何检查的吗？

@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

}

字符串

css

来源：https://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio

5条答案

按热度按时间

9fkzdhlc1#

简答

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

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

公式为：

$\frac{res_{p}}{res_{l}}$
的数据
其中
$res_{p}$
为物理线性分辨率，
$res_{l}$
为逻辑线性分辨率。
其他设备报告不同的设备像素比，包括非整数像素比。例如，诺基亚Lumia 1020报告1.6667，三星Galaxy S4报告3，苹果iPhone 6 Plus报告2.46 （来源：dpilove）。但这在原则上不会改变任何东西，因为你永远不应该为任何一个特定的设备设计。

讨论

CSS的“像素”甚至没有定义为“某个屏幕上的一个图片元素”，而是有一个参考像素，它是
$0.0213^{\circ}$
视角的非线性Angular 测量。这大约是
$1/96$
英寸。* 来源：CSS Absolute Lengths*
这对网页设计有很大的影响，例如准备高清晰度的图像资源，并在不同的设备像素比例下仔细应用不同的图像。你不想强迫低端设备下载一个非常高分辨率的图像，只是在本地缩小它。您也不希望高端设备升级低分辨率图像，以获得模糊的用户体验。
如果您无法使用位图图像，为了适应许多不同的设备像素比率，您应该使用CSS Media Queries或HTML picture Element为不同的设备组提供不同的资源集。将其与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'); }
}

字符串
这样，每个设备类型仅加载正确的图像资源。还要记住，CSS中的px单元始终对逻辑像素进行操作。

矢量图形案例

随着越来越多的设备类型出现，为它们提供足够的位图资源变得越来越棘手。在CSS中，媒体查询是目前唯一的方式，而在HTML5中，picture element允许您使用不同的来源进行不同的媒体查询，但支持仍然不是100%，因为大多数Web开发人员仍然需要支持IE11一段时间 （来源：caniuse）。
如果你需要清晰的图标图像，线条艺术，设计元素不是照片，你需要开始考虑SVG，它可以漂亮地扩展到所有分辨率。

赞(0）回复(0）举报 2023-08-09

amrnrhlw2#

设备像素比== CSS像素比

在Web开发领域，设备像素比（也称为CSS像素比）决定了CSS如何解释设备的屏幕分辨率。
浏览器的CSS通过以下公式计算设备的逻辑（或解释）分辨率：

$\text{logical resolution}=\frac{\text{physical resolution}}{\text{device pixel ratio}}$
的数据
举例来说：

苹果iPhone 6s

实际分离度：750 x 1334
CSS像素比例：2
逻辑分辨率：

$\frac{750}{2} \text{ x } \frac{1334}{2} = 375 \text{ x } 667$
的
查看网页时，CSS将认为设备的屏幕分辨率为375x667 ，媒体查询将按照屏幕分辨率为375x667 的方式进行响应。但是屏幕上的渲染元素将是实际375x667屏幕的两倍清晰，因为物理屏幕中的物理像素是实际屏幕的两倍。
其他一些例子：
三星Galaxy S4

实际分离度：1080 x 1920
CSS像素比例：3
逻辑分辨率：

$\frac{1080}{3} \text{ x } \frac{1920}{3} = 360 \text{ x } 640$
的

iPhone 5s

实际分离度：640 x 1136
CSS像素比例：2
逻辑分辨率：

$\frac{640}{2} \text{ x } \frac{1136}{2} = 320 \text{ x } 568$
的

为什么会有设备像素比？

创建CSS像素比的原因是因为随着手机屏幕分辨率的提高，如果每个设备的CSS像素比仍然为1，那么网页将呈现得太小而无法看到。
典型的全屏桌面显示器大约是24英寸，分辨率为1920x1080。想象一下，如果显示器缩小到大约5“，但具有相同的分辨率。在屏幕上看东西是不可能的，因为它们太小了。但制造商现在一直在推出1920x1080分辨率的手机屏幕。
因此，手机制造商发明了设备像素比，以便他们可以继续推动手机屏幕的分辨率，清晰度和质量，而不会使屏幕上的元素太小而无法看到或阅读。
这里有一个工具，它还可以告诉你当前设备的像素密度：
http://bjango.com/articles/min-device-pixel-ratio/

赞(0）回复(0）举报 2023-08-09

k10s72fa3#

Boris Smus的文章High DPI Images for Variable Pixel Densities对设备像素比有更准确的定义：每个CSS像素的设备像素数是一个很好的近似值，但不是全部。
请注意，您可以通过window.devicePixelRatio获取设备使用的DPR。

赞(0）回复(0）举报 2023-08-09

hxzsmxv24#

https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio

-moz-device-pixel-ratio

给出每个CSS像素的设备像素数。
这几乎是不言自明的。该数字描述了多少“真实的”像素（屏幕的物理像素1）用于显示一个“虚拟”像素（CSS中设置的大小）的比率。

赞(0）回复(0）举报 2023-08-09

eoigrqb65#

设备像素比与设备的像素密度直接相关。
我能找到的最好的描述：
DPR的目的是在具有不同物理像素密度的各种设备上保持CSS像素的一致大小，从而保持屏幕上字母，符号，图像和其他所有内容的一致大小。
来源：screenresolutiontest

赞(0）回复(0）举报 2023-08-09