有没有办法在 css 媒体查询中使用 DPI 而不是 px
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11722442/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to use DPI in css media queries instead of px
提问by Dennis Burton
Number of pixels width and height does not always tell the whole story. That works great for adding or removing items from the screen, but isn't quite right for setting the right image. With the retina display on the MBP, a browser window set to half of the screen would have the same number of pixels in width as most machines today. Yet, images displayed would likely be too small given the higher DPI.
像素宽度和高度的数量并不总是能说明全部情况。这对于在屏幕上添加或删除项目非常有用，但不太适合设置正确的图像。使用 MBP 上的视网膜显示，设置为屏幕一半的浏览器窗口将具有与当今大多数机器相同的像素数。然而，考虑到更高的 DPI，显示的图像可能太小。
Is there a way to change out images based on DPI rather than the number of pixels width and height?
有没有办法根据 DPI 而不是像素宽度和高度的数量来改变图像？
回答by Moin Zaman
You can do either:
您可以执行以下任一操作：
<link
rel="stylesheet"
type="text/css"
href="/css/retina.css"
media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)"
/>
or
或者
@media only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
/*use CSS to swap out your low res images with high res ones here*/
}
回答by Jay Harris
What you are looking for is the Device Pixel ratio. Because things like the iPhone display like a 320px screen but with a 640px layout (Pixel ratio of 2). In media queries, use "device-pixel-ratio". Though I would make sure to still use the vendor prefixes.
您正在寻找的是设备像素比。因为像 iPhone 这样的屏幕显示为 320 像素但布局为 640 像素（像素比为 2）。在媒体查询中，使用“设备像素比”。虽然我会确保仍然使用供应商前缀。
A good post on it: http://menacingcloud.com/?c=highPixelDensityDisplays
关于它的好帖子：http: //menacingcloud.com/?c=highPixelDensityDisplays
回答by Czarek Tomczak
There are also <img srcset>and -webkit-image-setcss function, but they seem to be supported only by Safari/Chrome/Opera. Example:
还有<img srcset>和-webkit-image-setcss 功能，但似乎只有 Safari/Chrome/Opera 支持。例子：
<img src="image.png" srcset="image-1x.png 1x,
image-2x.png 2x, image-3x.png 3x">
background-image: -webkit-image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
I'm not sure if the examples in the accepted answer by Moin Zaman work on IE/Firefox. Probably "min-resolution" needs to be used:
我不确定 Moin Zaman 接受的答案中的示例是否适用于 IE/Firefox。可能需要使用“最小分辨率”：
@media only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx)
回答by bjelli
In 2019 you can use a media query for resolution, min-resolution, max-resolution in all modern browsers except safari:
在 2019 年，您可以在除 safari 之外的所有现代浏览器中使用媒体查询来获取分辨率、最小分辨率、最大分辨率：
@media (min-resolution: 72dpi) {
p {
text-decoration: underline;
}
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution
请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution
