我有以下代碼：CSS：不同的媒體中使用同一類查詢
@media (min-width: 1200px) {
.color {
color: blue;
}
}
@media (min-width: 992px) {
.color {
color: red;
}
}
@media (min-width: 768px) {
.color {
color: green;
}
}
@media (max-width: 767px) {
}<div class="color">Wow ji</div>無論什麼屏幕尺寸，Wow ji只出現在綠色。我在這裏做錯了什麼？
max-width是顯示這些樣式的最大寬度。比指定號碼寬的屏幕不會使用與該規則相關聯的樣式。同樣，最小寬度是顯示這些樣式的最小寬度。比指定號碼窄的屏幕不會使用與該規則關聯的樣式。我已經改變了你的代碼max-width現在它的做工精細的所有媒體查詢，只需調整瀏覽器
@media (min-width : 1200px) {
.color{
color: blue;
}
}
@media (max-width : 992px) {
.color{
color: red;
}
}
@media(max-width:768px){
.color{
color: green;
}
}
@media(max-width:767px) {
.color{
color: yellow;
}
}<div class="color">Wow ji</div>這顯然不是最好的答案。 – connexo
在CSS中，它是應用，所以在你的代碼的最後一個相應的樣式，只要屏幕至少爲768px，它就會顯示爲綠色。
您需要在第一次測試中設置max-width，或者按照相反的順序進行設置。
你有一個壞的語法和用法，這是每次都不一樣。
我會推薦做這樣的：
@media screen and (max-width: 768px) { // or whatever screen size
.color {
color: green;
}
}
而且你最好在你的HTML添加<meta>viewport，讓您的媒體查詢工作的罰款。
一些文檔：
MDN - media queries
MDN - Using the viewport meta tag to control layout on mobile browsers
因爲你說的是在767px以上你想。顏色是綠色的，你需要換你的媒體查詢的順序各地 –
*無論什麼屏幕尺寸，'WOW JI'只出現在綠色中。*從你給我們的CSS這是不正確的。在768px以下的分辨率下，它可能不會是綠色的。有趣的是，到目前爲止，基於這樣一個明顯問題的問題得到3個upvotes。 – connexo