CSS媒體查詢（移動設備，平板電腦和屏幕）

我正在努力成爲響應式開發人員（而不是固定的）。我一直試圖瞭解最近媒體的疑問，並有一些困惑。測試很簡單：CSS媒體查詢（移動設備，平板電腦和屏幕）

我想要改變移動的身體背景顏色爲紅色的平板電腦，黃色的寬屏幕。以下代碼演示了這一點（大部分）。我遇到的問題是當寬度降到480px（30em）以下時，背景恢復爲默認的css（背景變成紅色變爲白色）。現在..，我的小心靈告訴我：「哦，我只是做一個

 @media only screen and (min-width:1em) { body { background:red;} }

......這將解決問題！」

這看起來不對且不直觀。有誰知道實現這個簡單任務的正確方法？

/* 
========================================================================== 
MOBILE (min-width 480px) 
========================================================================== */ 
    @media only screen and (min-width: 30em) { 

    body { background:red; font-size:.75em; } 

} 


/* 
========================================================================== 
TABLETS (min-width 768px) 
========================================================================== */ 
@media only screen and (min-width: 48em) { 

body { background:yellow; font-size:.85em; } 

} 

/* 
========================================================================== 
SCREENS (min-width 1140px) 
========================================================================== */ 
@media only screen and (min-width: 71.25em) { 

body { background:green; font-size:1em; } 

}

來源

2013-02-05 Oneezy

如果我是你，我會將整個CSS恢復爲max-width。像max-width: XX是智能手機，max-width: YY是一款平板電腦，其他的是一個屏幕。所以，它會變成這樣的東西：

body { background:green; font-size:1em; } 

@media only screen and (max-width: 71.25em) { 
    body { background:yellow; font-size:.85em; } 
} 

@media only screen and (max-width: 48em) { 
    body { background:red; font-size:.75em; } 
}

來源

2013-02-05 12:16:44

我做到了這一點，並開始後臺保持綠色無論哪種瀏覽器大小！這個效果只有在我實際上「恢復」了整個CSS代碼後才起作用，這意味着首先我按照屏幕順序「移動，平板電腦，屏幕」進行了佈局。當我將其切換到媒體「屏幕，平板電腦，手機」時，效果纔開始起作用。由於某種原因，我認爲每次使用媒體查詢都不會計算訂單（但我想它的確如此）。 – Oneezy

僅供參考，'max-width'違背了正確的「移動優先」'RWD'。只使用'min-width'，你不會需要第一個樣式的斷點，那些將會覆蓋整個網站，使這個「紅色」。然後爲你的下一個斷點添加媒體查詢（確保它出現在你的主要樣式之後，然後添加你的@media唯一屏幕和（最小寬度：48em）{'使那個黃色等等。然後，嘗試將所有媒體查詢視爲「覆蓋」。 – blamb

CSS媒體查詢（移動設備，平板電腦和屏幕）

回答

相關問題