Допустимо ли так писать медиа запросы для брейкпоинтов?

Question

[Snatch08]

Всем доброго времени суток!!
Подскажите плиз, допустимо ли так писать медиа запросы для брейкпоинтов:

@media only screen and (min-width: 0px) and (max-width: 640px) and (min-width: 641px) and (max-width: 1200px){

  h1{
    color: aqua;
  }
}
@media only screen and (min-width: 1201px){

  h1{
    color: pink;
  }
}

Знаю что можно было бы сразу написать так:

@media only screen and (min-width: 0px) and (max-width: 1200px){

  h1{
    color: aqua;
  }
}
@media only screen and (min-width: 1201px){

  h1{
    color: pink;
  }
}

но так слайдер ломается в вордпрессе

Answer 1

[Сергей delphinpro]

А смысл? Условие (max-width: 640px) and (min-width: 641px) никогда не выполнится.
Экран не может быть одновременно меньше 640 и больше 641

Comments

[Snatch08]

Аа, я понял, благодарю) А если что-то типо такого:

@media only screen and (min-width: 0px) and (max-width: 640px),
@media only screen and and (min-width: 641px) and (max-width: 1200px){

  h1{
    color: aqua;
  }
}
@media only screen and (min-width: 1201px){

  h1{
    color: pink;
  }
}

Не хочется городить еще кучу повторяющегося кода

[Сергей delphinpro]

Snatch08, ну тут уже логика присутствует =)
Хотя вы сами понимаете, что две строки заменяются на одну

-@media only screen and (min-width: 0px) and (max-width: 640px),
-@media only screen and and (min-width: 641px) and (max-width: 1200px){
+@media (max-width: 1200px){

они эквивалентны.

[Сергей delphinpro]

а, нет. кажется так нужно

@media (min-width: 0px) and (max-width: 640px),
       (min-width: 641px) and (max-width: 1200px){

давно не писал OR логики в медиа, даже не помню как правильно пишется =)

[Snatch08]

Сергей delphinpro, Круто!! Благодарочка!)