Question

像素宽度和高度并不总能说明整个故事。这适用于在屏幕上添加或删除项目，但不适合设置正确的图像。使用MBP上的视网膜显示器，设置为屏幕一半的浏览器窗口将具有与当今大多数机器相同的像素宽度。然而，鉴于DPI较高，显示的图像可能太小。

有没有办法根据DPI更改图像而不是像素宽度和高度？

Answer 1

你可以这样做：

<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)"
/>

或

@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*/
}

Answer 2

您要寻找的是设备像素比率。因为iPhone之类的东西显示为320px的屏幕，但布局为640px（像素比率为2）。在媒体查询中，使用“设备像素比”。虽然我会确保仍然使用供应商前缀。

关于它的好帖子：http://menacingcloud.com/?c=highPixelDensityDisplays

Answer 3

还有<img srcset>和-webkit-image-set css功能，但它们似乎只受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
);

我不确定Moin Zaman接受的答案中的例子是否适用于IE / Firefox。可能需要使用“最小分辨率”：

@media only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx)

Answer 4

2019年，您可以在除safari外的所有现代浏览器中使用媒体查询来获取分辨率，最小分辨率，最大分辨率：

@media (min-resolution: 72dpi) {
  p {
    text-decoration: underline;
  }
}

请参见https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution

有没有办法在css媒体查询中使用DPI而不是px

4 个答案: