CSS: Используя тот же класс в различных средах запросы

Question

У меня есть следующий код:

@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 появляется только в зеленом цвете. Что я здесь делаю неправильно?

Answer 1

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>

Answer 2

В CSS это последний соответствующий стиль, который применяется, поэтому в вашем коде, пока экран будет по крайней мере 768px, он будет зеленым.

В первых тестах необходимо установить max-width или выполнить их в обратном порядке.

Answer 3

Потому что вы говорите, на 768px или выше вы хотите .color быть зеленым вам нужно поменять порядок ваших медиа-запросов вокруг или использовать макс-ширина

Answer 4

У вас есть плохой синтаксис и использование, это даже не каждый раз.
Я бы Recommand делать так:

@media screen and (max-width: 768px) { // or whatever screen size 
    .color { 
     color: green; 
    } 
} 

А лучше добавить <meta>viewport в вашем HTML, чтобы сделать ваши медиа-запросов работает нормально.
Некоторых документы:
MDN - media queries
MDN - Using the viewport meta tag to control layout on mobile browsers