Именно каскад делает CSS особенным и мощным. Но в случае медиа-запросов перекрываютсяМожно кажется проблематичным.

Рассмотрим следующий CSS (продолжениеправила перекрытия медиазапросов CSS):

/* Standard - for all screens below 20em */

body { color: black; font-size: 1em; }

/* Query A - slightly wider, mobile viewport */

@media (min-width: 20em) and (max-width: 45em) {
    body { color: red; } /* supposed to be unique for this width */
}

/* Query B - everything else */

@media (min-width: 45em) {
    body { font-size: larger; } /* because viewport is bigger */
}

Поэтому, когда ширина экрана составляет 45em, перекрытие на 45emбудет лечиться в соответствии со стандартным каскадом CSS:

Всеmax-width: 45em определения будут применяться в первую очередь,и всеmin-width: 45em будет применяться после этого.

Рассмотрим эти два условия:

Весь текст обычно будетblack, ноЗапрос А уникален и имеет.color: redпосколькуЗапрос B для больших областей просмотра, это 'Текст имеет CSS.font-size: larger

Поэтому на ширине ровно 45 мкм мыбуду получатьбольшой и красный текст.Каково было бы лучшее решение, чтобы избежать этого?

Я вижу две возможности:

Повторно объявить текст, чтобы иметьcolor: black вЗапрос Bно тогда тыУправление двумя объявлениями, если вы решите изменитьcolor в будущем. (Конечно, не такая проблема с этой единственной строкой кода, но представьте, чтоs много других объявлений и селекторов.)

Избегайте перекрытия, используя значения пикселей, такие какmax-width: 799px а такжеmin-width: 800pxно тогда тыповторное использование пикселей - Я думаю, они могут быть 49,9375em и 50em соответственно. Хотя что, если по умолчанию больше не 16em и что-то округляется? И мы'ревсе еще не уверен что происходит на этом промежутке. (Черная дыра, которая нарушает пространственно-временной континуум?)

У обоих есть свои недостатки ... есть еще идеи?