Question

我正在开展一个面向未来的流动网站，并且不同意以下内容：

@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的设备）用于高分辨率显示器，我想在用户具有“任何”高分辨率显示器（如视网膜）时生效。因此，为了节省所有大量的媒体查询并将其用于未来的证据，我更愿意只编写一次。就像所有高分辨率屏幕的主媒体查询，无论是视网膜，iPhone，戴尔，惠普等，nexus手机等。

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

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

媒体查询：定位所有高分辨率显示

1 个答案: