设备像素比究竟是什么？
这是关于移动网络的每一篇文章都提到的,但我无处可以找到这个属性究竟是什么衡量的解释.
任何人都可以详细说明这样的查询是什么？
@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
}
And*_*lad 149
简短的回答
器件像素比是物理像素和逻辑像素之间的比率.例如,iPhone 4和iPhone 4S报告设备像素比为2,因为物理线性分辨率是逻辑线性分辨率的两倍.
- 物理分辨率:960 x 640
- 逻辑分辨率:480 x 320
公式是:
哪里:
是物理线性分辨率
和:
是逻辑线性分辨率
其他设备报告不同的设备像素比率,包括非整数像素比率.例如,诺基亚Lumia 1020报告1.6667,Samsumg Galaxy S4报告3,Apple iPhone 6 Plus报告2.46 (来源:dpilove).但这不会改变原则上的任何内容,因为您永远不应该为任何一个特定设备进行设计.
讨论
CSS的"像素"甚至没有定义为"一些屏幕上的一个图像元素",而是作为一个非线性角度测量的 视角,大约是
一臂之力的一英寸.来源:CSS绝对长度
这对于网页设计有很多影响,例如准备高清图像资源并以不同的设备像素比率仔细应用不同的图像.您不希望强制低端设备下载非常高分辨率的图像,只能在本地缩小图像.您也不希望高端设备升级低分辨率图像以获得模糊的用户体验.
如果您遇到位图图像,为了适应许多不同的设备像素比率,您应该使用CSS媒体查询为不同的设备组提供不同的资源集.将此与漂亮的技巧相结合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中,picture元素允许您为不同的媒体查询使用不同的源,但是支持仍然不是100%,因为大多数Web开发人员仍然需要支持IE11一段时间(来源:caniuse).
如果您需要清晰的图像,图标,线条艺术,非照片的设计元素,您需要开始考虑SVG,它可以精确地扩展到所有分辨率.
- 你不能.您需要使用逻辑像素布局元素,并使用更高分辨率的图像和"背景大小"技巧来最佳地使用显示. (2认同)
- 我不知道android案例.可能是不同的制造商对逻辑和物理像素有不同的想法......在几百种不同的设备上自己尝试一下......或者只是假设设备报告的值是正确的.不要为特定设备设计,而是使用媒体查询设计价值范围! (2认同)
- @atornblad我认为它应该是"......物理*和*逻辑*像素之间" (2认同)
Jak*_*son 146
器件像素比率== CSS像素比率
在Web开发领域,设备像素比(也称为CSS Pixel Ratio)决定了CSS如何解释设备的屏幕分辨率.
浏览器的CSS通过以下公式计算设备的逻辑(或解释)分辨率:
例如:
Apple iPhone 6s
- 实际分辨率:750 x 1334
- CSS像素比率:2
- 逻辑分辨率:
在查看网页时,CSS会认为该设备具有375x667分辨率的屏幕,而媒体查询将响应,就像屏幕是375x667一样.但是屏幕上渲染的元素将是实际375x667屏幕的两倍,因为物理屏幕中的物理像素数量是其两倍.
其他一些例子:
三星Galaxy S4
- 实际分辨率:1080 x 1920
- CSS像素比率:3
- 逻辑分辨率:
iPhone 5S
- 实际分辨率:640 x 1136
- CSS像素比率:2
- 逻辑分辨率:
为什么存在设备像素比？
创建CSS像素比率的原因是因为随着手机屏幕获得更高的分辨率,如果每个设备仍然具有1的CSS像素比率,那么网页将变得太小而无法看到.
典型的全屏桌面显示器大约是24英寸,分辨率为1920x1080.想象一下,如果显示器缩小到大约5英寸,但具有相同的分辨率.在屏幕上查看内容是不可能的,因为它们会非常小.但制造商现在一直推出1920x1080分辨率的手机屏幕.
因此,设备像素比率是由手机制造商发明的,因此它们可以继续提高手机屏幕的分辨率,清晰度和质量,而不会使屏幕上的元素太小而无法看到或读取.
这是一个工具,它还可以告诉您当前设备的像素密度:
http://bjango.com/articles/min-device-pixel-ratio/
- @MuhammadUmer在你的例子中,一个宽度为100%的300px图像将是显示器的整个宽度.它不会被拉伸.屏幕"认为"这是一个300px的显示屏.根据逻辑/ css分辨率显示图像.现在,在您的示例中,您也可以改为提供600px图像.它将是逻辑300px显示器的全宽,但由于您的显示器是原生600px,因此图像的外观将比原始300px图像的两倍.更大的图像,但它看起来更好,因为显示器具有所有这些额外的像素.这是"Retina Displays"背后的理念. (2认同)
https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio
-moz-device-pixel-ratio
给出每个CSS像素的设备像素数.
这几乎是自我解释的.该数字描述了使用多少"真实"像素(屏幕的物理像素)来显示一个"虚拟"像素(CSS中设置的大小)的比率.
- 我如何知道设备是否完全使用虚拟像素测量以及它是什么？以及如何在css测量中使用设备像素而不是虚拟？ (4认同)
Boris Smus的文章针对可变像素密度的高DPI图像具有更精确的设备像素比定义:每个CSS像素的设备像素数量是一个很好的近似值,但不是整个故事.
请注意,您可以获取设备使用的DPR window.devicePixelRatio.