0

我正在为一个使用全封面背景的网站编写一些 css 代码，我想将它与媒体查询一起提供给具有不同分辨率的多个设备。

我已经想出了如何使用所有 iPhone 和 iPad 来做到这一点：

@media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:1) { /* for the iPhone 2G/3G/3GS */ }
@media only screen and (min-device-width:640px) and (max-device-width:960px) and (-webkit-min-device-pixel-ratio:2) { /* for the iPhone 4/4S */ }
@media only screen and (min-device-width:560px) and (max-device-width:1136px) and (-webkit-min-device-pixel-ratio:2) { /* for the iPhone 5 */ }
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1) { /* for the iPad 1/2 and iPad mini */ }
@media only screen and (min-device-width:1536px) and (max-device-width:2048px) and (-webkit-min-device-pixel-ratio:2) { /* for the iPad 3/4 */ }

对于某些桌面屏幕：

@media only screen and (min-device-width:1280px), only screen and (min-device-width:1366px), only screen and (min-device-width:1440px) { /* some regular desktop resolutions */ }
@media only screen and (min-device-width:1680px), only screen and (min-device-width:1920px) { /* some larger desktop resolutions, likely hd screens */ }

由于所有这些媒体查询的目的是在每个媒体查询中使用这个 css 规则来满足一个完整的背景（@media显然，考虑到设备之间的规格，使用不同的图像，以减少服务器负载并显示友好的背景）......

html {
    background:url("image.jpg") no-repeat center center fixed;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;}

我对Retina 屏幕（尤其是 Macbook Pro Retina、13 英寸和 15 英寸型号）这样做表示怀疑。

我想，使用与上面相同的逻辑，这应该是这样的：

@media 
only screen and (min-device-width:2560px) and (min--moz-device-pixel-ratio: 2), 
only screen and (min-device-width:2560px) and (-o-min-device-pixel-ratio: 2/1), 
only screen and (min-device-width:2560px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width:2560px) and (min-device-pixel-ratio: 2) { /* for the 13inch model */ }

@media 
only screen and (min-device-width:2880px) and (min--moz-device-pixel-ratio: 2), 
only screen and (min-device-width:2880px) and (-o-min-device-pixel-ratio: 2/1), 
only screen and (min-device-width:2880px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width:2880px) and (min-device-pixel-ratio: 2) { /* for the 15inch model */ }

所以......我希望这能以这种方式工作。

另外，我希望你给我一些关于改进这一点的建议。主要思想是，对于每个显示分辨率和设备，提供不同的图像，以避免服务器和客户端（在本例中为浏览器）过载。

4

1 回答 1

0

这是旧的，但也许这些链接有帮助？

CSS Tricks 视网膜显示媒体查询

Coder Wall - 高清和视网膜显示媒体查询

于 2014-03-13T21:03:31.723 回答