设备像素比到底是什么?

每一篇关于移动网络的文章都提到了这一点，但我找不到一篇解释这个属性到底是用来衡量什么的文章 有人能详细说明一下这样的查询检查什么吗?< / p > 
@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


}
169621 次浏览
小开
最佳答案

简短的回答

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

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

公式为:

linres_p/linres_l

地点:

linres_p是物理线性分辨率 . 0

和:

linres_l是逻辑线性的决议

其他设备报告不同的设备像素比，包括非整数。例如，诺基亚Lumia 1020报告1.6667，三星Galaxy S4报告3，苹果iPhone 6 Plus报告2.46 (来源:的视角的非线性角度测量，这大约是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'); }
}

这样，每种设备类型只加载正确的映像资源。还要记住，CSS 总是中的px单元操作在逻辑像素上。

矢量图形的一个案例

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

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

小开

< a href = " https://developer.mozilla.org/en/CSS/Media_queries -moz-device-pixel-ratio " > https://developer.mozilla.org/en/CSS/Media_queries -moz-device-pixel-ratio < / >

< p > -moz-device-pixel-ratio < br > 给出每个CSS像素的设备像素数

这几乎不言自明。该数字描述了“真实”像素(屏幕的物理像素)用于显示一个“虚拟”像素(在CSS中设置的大小)的比例。

小开

设备像素比== CSS像素比

在web开发的世界中，设备像素比(也称为CSS像素比)决定了CSS如何解释设备的屏幕分辨率。

浏览器的CSS通过以下公式计算设备的逻辑(或解释)分辨率:

formula

例如:

苹果iPhone 6s

  • 实际分辨率:750 x 1334
  • CSS像素比:2
  • 逻辑分辨率:

formula

在浏览网页时，CSS会认为这个设备的分辨率是375x667屏幕和媒体查询将响应，如果屏幕是375x667. 0屏幕。但在屏幕上呈现的元素将是实际375x667屏幕的两倍，因为在物理屏幕上有两倍的物理像素。

其他一些例子:

三星Galaxy S4

  • 实际分辨率:1080 × 1920
  • CSS像素比:3
  • 逻辑分辨率:

formula

iPhone 5 s

  • 实际分辨率:640 x 1136
  • CSS像素比:2
  • 逻辑分辨率:

formula

为什么存在设备像素比?

创建CSS像素比的原因是，随着手机屏幕的分辨率越来越高，如果每个设备的CSS像素比仍然为1，那么网页就会渲染得太小而无法看到。

典型的全屏桌面显示器大约是24英寸，分辨率为1920x1080。想象一下，如果显示器缩小到大约5英寸，但分辨率相同。在屏幕上看东西是不可能的，因为它们太小了。但制造商现在一直在推出1920x1080分辨率的手机屏幕。

所以，设备像素比是手机制造商发明的，这样他们就可以继续提高手机屏幕的分辨率、清晰度和质量，而不会让屏幕上的元素太小而无法看到或阅读。

下面这个工具还可以告诉你当前设备的像素密度:

http://bjango.com/articles/min-device-pixel-ratio/

小开

Boris Smus的文章可变像素密度的高DPI图像对设备像素比有一个更准确的定义:每个CSS像素的设备像素数是一个很好的近似值，但不是全部。

注意，你可以通过window.devicePixelRatio获取设备使用的DPR。

小开

设备像素比与设备像素密度直接相关。

我能找到的最简洁的描述:

DPR的目的是保持CSS像素大小一致，因此 大小一致的字母，符号，图像和其他一切 屏幕，跨各种设备具有不同的物理像素 密度。< / p >

来源:screenresolutiontest


提交答案