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

Question

宽度和高度的像素数并不总能说明全部情况。这对于在屏幕上添加或删除元素非常有用，但对于设置正确的图像来说不太合适。在 MBP 上使用 Retina 显示器，设置为屏幕一半的浏览器窗口将具有与当今大多数机器相同数量的像素宽度。然而，考虑到较高的 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*/
}