Именно каскад делает 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 для больших видовых экранов, текст имеет CSSfont-size: larger.

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

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

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

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

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