0

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

@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 的旧浏览器和设备）用于高分辨率显示器，我希望在用户拥有像视网膜这样的“任何”高分辨率显示器时生效。因此，为了省去所有大量的媒体查询并拥有所有未来的证明，我宁愿只写一次。就像所有高分辨率屏幕的主媒体查询一样，无论是 macretina、iphone、dell、HP 等、nexus phone 等。

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

4

1 回答 1

2 
/* 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 */
}
于 2014-06-08T19:10:53.737 回答