媒体查询：针对所有高分辨率显示器答案

【问题标题】：Media Queries: Target all high resolutions displays媒体查询：针对所有高分辨率显示器
【发布时间】：2014-07-12 14:43:58
【问题描述】：

我正在开发一个面向未来的流体网站，但不同意以下内容：

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      ,
only screen and (   min--moz-device-pixel-ratio: 2)      ,
only screen and (     -o-min-device-pixel-ratio: 2/1)    ,
only screen and (        min-device-pixel-ratio: 2)      ,
only screen and (                min-resolution: 192dpi) ,
only screen and (                min-resolution: 2dppx)  { 
}

世界不仅仅是视网膜或具有 1、1.5 或 2 像素比率的设备。我们将在未来继续拥有更多的数字。我的问题是：我如何针对所有这些决议和未来的决议？

我的问题是我的 PNG 的 SVG 版本（PNG 支持像素比为 1 的旧浏览器和设备）用于高分辨率显示器，我希望在用户拥有像视网膜这样的“任何”高分辨率显示器时生效.因此，为了节省所有大量的媒体查询并拥有所有未来的证明，我宁愿只写一次。就像所有高分辨率屏幕的主媒体查询一样，无论是 mac Retina、iphone、dell、HP 等、nexus phone 等。

为什么只有最小分辨率：192dpi 或 2dppx？我的意思是像素密度 1.5 144dpi 呢？将最小值设置为 100dpi（标准为 96）不是更好吗，高于正常值的所有内容都将使用我的 SVG。 100dpi, 101, 102......144dpi......192.......300dpi............900dpi.......1000 dpi 等等。

【问题讨论】：

min- 前缀不应该都覆盖了吗？
@BoldClock 确实，但我不完全确定为什么每个人都添加 2ddpx 和 192dpi 作为标准。如果有设备低于这些值怎么办？

标签： css media-queries retina-display high-resolution

【解决方案1】：

/* 1.25 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
    /* Retina-specific stuff here */
}

/* 1.3 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 124.8dpi){ 
    /* Retina-specific stuff here */
}

/* 1.5 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 
    /* Retina-specific stuff here */
}


/* 2 dpr */
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi){ 
    /* Retina-specific stuff here */
}

【讨论】：