A cascata é o que torna o CSS especial e poderoso. Mas no caso de consultas de mídia, a sobreposiçãoposso parece problemático.

Considere o seguinte CSS (continuandoregras para sobreposição de consulta de mídia 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 */
}

Então, quando a tela é exatamente 45em largura, a sobreposição em 45emserá tratado de acordo com a cascata CSS padrão:

Todosmax-width: 45em definições serão aplicadas primeiro,e tudomin-width: 45em será aplicado a partir de então.

Considere estas duas condições:

Todo o texto seria normalmenteblack, masConsulta A é único e temcolor: red.Desde aConsulta B é para viewports maiores, é o texto tem o CSSfont-size: larger.

Portanto, em uma largura de exatamente 45em, teríamostexto grande e vermelho. Qual seria a melhor solução para evitar isso?

Eu vejo duas possibilidades:

Re-declarar o texto para tercolor: black emConsulta B, mas então você está gerenciando duas declarações, se você optar por mudar ocolor no futuro. (Claro, não é um problema com essa linha única de código, mas imagine que há muitas outras declarações e seletores.)

Evite a sobreposição usando valores de pixels comomax-width: 799px emin-width: 800px, mas então você está usando pixels - eu acho que eles poderiam ser 49.9375em e 50em, respectivamente. Porém, e se o padrão não for mais 16em e algo for arredondado? E foramainda não tenho certeza o que acontece nessa lacuna. (Um buraco negro que quebra o continuum espaço-tempo?)

Ambos têm suas desvantagens ... alguma outra ideia?