媒體查詢如何響應

我想知道媒體查詢如何響應。媒體查詢如何響應

例如，我具有由500px放置大小1400px的圖像基本媒體，並通過爲200px移動設備尺寸450px的另一圖像。

我使用媒體查詢在同一個html頁面中調用它。我想在用戶在移動設備中打開它時顯示小圖片。

如果我爲同一圖像調用兩個CSS（即使用css根據媒體更改背景），我的大圖像是否會加載到移動設備中？或者它會簡單地加載小圖像而忽略較大的圖像？我已經把主CSS放在手機CSS之前。我認爲大圖像必須已經加載。如果是這樣，那麼我的網站將在移動設備上緩慢運行。

您的觀點是什麼？

來源

2012-10-06 Ankur Vishnoi

不，不會在移動設備上顯示大圖，只要您將其插入到排除該媒體查詢的媒體查詢中即可。但是，這將是下載，如果你組織你的CSS是這樣的：

/* FIRST DECLARATION: 
    BROWSER STARTS DOWNLOADING THE IMAGE */ 
.my-img-class{ 
    background:url(my-large-image.jpg); 
} 

/* SECOND DECLARATION: 
    THE RULE ABOVE IS OVERWRITTEN, SO THIS IMAGE WILL BE DOWNLOADED TOO */ 
@media only screen and (max-width: 600px) { 
    .my-img-class{ 
     background:url(my-small-image.jpg); 
    } 
}

爲了防止移動設備繼續下載大圖，你應該換這兩個規則成爲媒體查詢。

下面是一個例子。

@media only screen and (max-width: 600px) { 
    .my-img-class{ 
     background:url(my-small-image.jpg); 
    } 
}

上面的代碼將僅由與屏幕較小然後600px的設備進行解釋。

@media screen and (min-width: 601px) { 
    .my-img-class{ 
     background:url(my-large-image.jpg); 
    } 
}

上面的代碼將僅由與屏幕較大然後600px的設備進行解釋。

您可以使用不同的方法來防止下載這兩個圖像。

很大程度上取決於您的網站的目標。如果移動版本使用最廣泛，則應開始進行規劃，然後通過媒體查詢逐漸添加桌面版本的內容。

這裏有一些資源，你會發現usefuls：

來源

2012-10-06 10:15:51 Giona

媒體查詢如何響應

回答

相關問題