Question

我正在为一个使用完整封面背景的网站做一些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 */ }

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

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;}

对于视网膜屏幕（尤其是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 */ }

所以......我希望这会以这种方式运作。

另外，我希望您就改善这一点给我一些建议。主要思想是，对于每个显示分辨率和设备，提供不同的图像，以避免服务器和客户端（在这种情况下，浏览器）过载。

Answer 1

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

CSS Tricks retina display media query

Coder Wall - HD & Retina Display Media Queries

想知道如何通过媒体查询（特别是视网膜显示器）提供不同的图像背景

1 个答案: