响应背景图像CSS媒体查询

Question

我已经做了一些CSS来选择适当的设备图像。但我不知道为什么它会在我的视网膜专业版15英寸上显示bg970.png图像。

<style> 
/* default screen, non-retina */ 
/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
body{ 
    background: url("img/bg970.png") no-repeat fixed; } 

} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
body{ background: url("img/bg970.png") no-repeat fixed; } 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
body{ background: url("img/bg970.png") no-repeat fixed; } 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
body{ background: url("img/bg970.png") no-repeat fixed; } 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
body{ background: url("img/bg970.png") no-repeat fixed; } 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
body{ background: url("img/bg970.png") no-repeat fixed; } 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
/* Styles */ 
body{ background: url("img/bg1224.png") no-repeat fixed; } 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
/* Styles */ 
body{ background: url("img/bg1824.png") no-repeat fixed; } 
} 

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
body{ background: url("img/bg970.png") no-repeat fixed; } 
} 
</style> 

Answer 1

你的最后一句话是：

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
body{ background: url("img/bg970.png") no-repeat fixed; } 
} 

，但似乎适用于任何视网膜设备，包括你的Mac Pro。