媒體查詢邏輯（優先級）

下面是一個簡單的CSS：媒體查詢邏輯（優先級）

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
.test { 
background-image: url('red.png'); 
} 
} 

/* Desktop ----------- */ 
.test { 
background-image: url('blue.png'); 
font-size: 100px; 
}

問題1：如果我使用智能手機訪問該網站，將瀏覽器也可以下載文件「blue.png」？（即使屏幕上未顯示）

問題2：如果我使用智能手機訪問此網站，字體大小是100px嗎？（對於字體大小，移動樣式沒有聲明）。

問題3：如果我使用智能手機訪問此網站，瀏覽器是否完全忽略第二個.test類（用於桌面？）。如果是的話，瀏覽器會忽略它，如果在CSS文件中它會出現在移動類之前？

謝謝！

來源

2014-12-19 Malasorte

是---是---否 – DaniP

http：// timkadlec。com/2012/04/media-query-asset-download-results /這是一個很好的參考資料，可以幫助您瞭解哪些瀏覽器在某些媒體查詢中下載資源 – cport1

問題1：
As @ cport1在評論中提到，您幾乎可以看到結果here。
用其他圖像覆蓋background-image將適用於大多數瀏覽器。
但是，您應該使用默認背景（大於移動設備）創建另一個媒體查詢。

對於問題2：
是的，所有設備上的font-size都是相同的。
像素在所有設備上的大小相同。 em是一個更適合移動設備的尺寸單位。

問題3：
屬性未定義媒體查詢將從查詢外的類繼承（如果可能的話）。
簡單地說：不。

來源

2014-12-19 14:16:58 Claudio

謝謝你的好鏈接。 – Malasorte

問題1：

只有blue.png將被下載，它忽略了紅色（你覆蓋它）

問題2：是字體大小爲100px的移動

問題3：不，它會被應用！

例如：http://jsbin.com/fohuzakeki/1/edit?html,css,js,output

你就能更好地把移動第一沒有媒體查詢，然後建立了dekstop網站使用最小寬度

來源

2014-12-19 14:05:24 Extranion

您的問題1不正確 – cport1

我調整了它，只下載了藍色。 – Extranion

Q1媒體查詢：這取決於。如果您的頁面包含該類的元素，則會下載blue.png背景。

Q2：是的，正是如上

Q3：沒有，因爲第二條規則不受任何限制mediaquery所以，無論你正在使用的設備，將始終應用。

來源

2014-12-19 14:15:22 fcalderan

媒體查詢邏輯（優先級）

回答

相關問題