媒體查詢不費一槍

的目標是使電網系統的每個箱子根據屏幕大小排變化量。下面是一個例子

Screen Size Boxes Percent Width 
1250px   3   33.3 
750px   2   50 
500px   1   100

目前進展

我創建了網格系統和媒體查詢

/* Max Width 1250px */ 
@media screen and (max-width: 1250px) { 
    .boxes { 
     width: 33.3%; 
    } 
} 

/* Max Width 750px */ 
@media screen and (max-width: 750px) { 
    .boxes { 
     width: 50%; 
    } 
} 

/* Max Width 500px */ 
@media screen and (max-width: 500px) { 
    .boxes { 
     width: 100%; 
    } 
}

的問題

我現在有媒體查詢工作在750像素和500像素，但它跳過1250像素。不知道750px和1250px之間有什麼區別？爲什麼它不工作？

的jsfiddle -https://jsfiddle.net/6k2Lkm2f/1/

來源

2016-02-27 Matt Hammond

你750px和1250px媒體查詢同時擁有50％的寬度..所以你的意思「沒有工作」是什麼？他們應該如何工作？ – Hardy

http://codepen.io/anon/pen/QNWEPQ您的查詢工作。您的CSS可能是錯誤的，雖然 –

@ Hardy對不起，我是複製並粘貼代碼，看看是否拼寫，但仍然不會觸發 –

我以前也有過類似的問題。

您應該使用min-width和max-width分別設置下限和上限。

另外你的前兩個是多餘的。兩者都給予.boxes類50％的寬度。這將是更好的將它們組合成一個，這符合兩國的觀點

/* Max Width 1250px */ 
@media only screen and (min-width: 501px) and (max-width: 1250px) { 
    .boxes { 
     width: 50%; 
    } 
} 

/* Max Width 500px */ 
@media only screen and (max-width: 500px) { 
    .boxes { 
     width: 100%; 
    } 
}

使用上述語法是一個偉大的方式，以防止混淆。

編輯：媒體查詢只適用於ie9及以上版本。如果您使用的是較舊的瀏覽器，則上述內容無法使用。

第二編輯：它看起來像在媒體查詢中需要在類型之前添加only。例如

@media only screen，而不是@media screen

來源

2016-02-27 01:03:06

仍然沒有按預期工作 - https://jsfiddle.net/6k2Lkm2f/2/如果我添加.boxes寬度原始CSS寬度 - 在媒體查詢中如此（min-width：1251px）{.boxes {width：25％;}}？ –

這是一個糟糕的主意，完全搞砸了XD –

我在最新的Safari瀏覽器上並在Chrome上測試過 –

媒體查詢不費一槍

回答

相關問題