3
我正在努力成爲響應式開發人員(而不是固定的)。我一直試圖瞭解最近媒體的疑問,並有一些困惑。測試很簡單: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; }
}
我做到了這一點,並開始後臺保持綠色無論哪種瀏覽器大小!這個效果只有在我實際上「恢復」了整個CSS代碼後才起作用,這意味着首先我按照屏幕順序「移動,平板電腦,屏幕」進行了佈局。當我將其切換到媒體「屏幕,平板電腦,手機」時,效果纔開始起作用。由於某種原因,我認爲每次使用媒體查詢都不會計算訂單(但我想它的確如此)。 – Oneezy
僅供參考,'max-width'違背了正確的「移動優先」'RWD'。只使用'min-width',你不會需要第一個樣式的斷點,那些將會覆蓋整個網站,使這個「紅色」。然後爲你的下一個斷點添加媒體查詢(確保它出現在你的主要樣式之後,然後添加你的@media唯一屏幕和(最小寬度:48em){'使那個黃色等等。然後,嘗試將所有媒體查詢視爲「覆蓋」。 – blamb