用於查詢和背景圖像的css層次結構

我有想法爲我的網站的表格pc和移動版本製作不同大小的背景圖像。例如：用於查詢和背景圖像的css層次結構

media only screen and (max-width: 480px) { 
    .myImage { 
    background-image:url(image_small.jpg); 
    } 
} 

.myImage { 
background-image:url(image_big.jpg); 
}

是否有任何種類的層次結構覆蓋瀏覽器中的圖片？是否移動瀏覽器將加載image_big.jpg它的緩存或類似的東西？我還需要（從下載我的移動image_big停止瀏覽器）

原諒實施任何形式的順序在HTML我的CSS文件來實現我想要什麼？我的英語

來源

2014-12-02 Artem Gordienko

你的兩個規則是南轅北轍在上面的代碼。 CSS Specificity表示，因爲你的規則都有相同的選擇器：'.myImage'，所以最後一個選擇器勝出，因此即使在小屏幕尺寸下也會使用大圖片。通常在響應式編碼中，首先是基本CSS規則（即不在媒體查詢中的規則），然後是媒體查詢。這避免了這裏出現的錯誤。至於你的最後一個問題，是的，你的CSS文件在HTML中的順序是至關重要的，因爲不同電子表格中的規則具有相同的特性，最後一個否決了早期的規則。 – GuyH 2014-12-02 22:42:21

要回答你的每一個問題依次爲：

1.是否有任何種類的層次結構覆蓋瀏覽器中的圖片？

不確定你指的是什麼，應用是通過CSS specificity/cascade /基本選擇確定的圖像。顯示的圖像或者是唯一一個根據適用規則確定，最後在一系列適用的規則中列出，或在一個適用的規則，最特異上市

2.做手機瀏覽器將加載它的緩存或類似的image_big.jpg？

沒有，請參閱下面

3，做我需要實現在任何類型的順序在我的HTML CSS文件來實現我想要什麼？（停止瀏覽器下載我image_big爲移動）

不，雖然瀏覽器相關的，主要的瀏覽器不（似乎）負載不適用的圖像（測試鍍鉻32，FF10，IE9）。如果在加載的DOM中未找到CSS選擇器，則認爲圖像不適用。

此外，這爲資產負載和媒體great article查詢

來源

2014-12-02 08:08:15 SW4

用於查詢和背景圖像的css層次結構

回答

相關問題