@media независимые стили для каждого разрешения?

Question

[SuperToster]

Для одной разметки на разрешениях до 600 и после 600, две таблицы стилей с полностью отличающимися наборами правил которые не должны пересекаться.
Правильно ли будет использовать такую конструкцию или можно записать это более корректно?
Спасибо!

@media (min-width: 600px) {
  .someone {

  }
}

@media (max-width: 600px) {
  .someone {
  
  }
}

Comments

[Rsa97]

На 600px у вас сразу оба стиля сработают.

[SuperToster]

Rsa97, не подскажете как этого избежать?

[Rsa97]

SuperToster, Поставить min-width: 601px или max-width: 599px.

[Виталий Першин]

Rsa97,

Поставить min-width: 601px или max-width: 599px.

Не верно. min-width включает в себя значение, то есть должно быть 600px

Answer 1

[Виталий Першин]

Вполне нормальный подход, который можно применять хоть к каждому элементу по отдельности, а в последствии использовать сборку с объединением медиа-выражений.

Я уже давно так делаю, например для верстки меню, ведь обычно в мобильной и в десктопных версиях, они кардинально разные. Вот хорошее объяснение такой техники: https://youtu.be/o7A0e4PkSAQ?t=1460 блок про медиа-выражения.

Ну и как ранее сказали, если у вас 2 разных верстки, тогда уже практичнее применять медиа в линках