Quais são as regras para sobreposição de consulta de mídia CSS?
Cascata.
@mediaas regras são transparentes para a cascata, portanto, quando duas ou mais @mediaregras correspondem ao mesmo tempo, o navegador deve aplicar os estilos em todas as regras que correspondem e resolver a cascata de acordo. 1
O que acontecerá, em todos os navegadores compatíveis, exatamente em 20em e 45em?
Com exatamente 20em de largura, sua primeira e segunda consulta de mídia serão correspondentes. Os navegadores irão aplicar estilos em ambas as @mediaregras e em cascata de acordo, portanto, se houver alguma regra conflitante que precise ser substituída, a última declarada vence (levando em conta seletores específicos !important, etc.). O mesmo ocorre com a segunda e a terceira consulta de mídia quando a janela de visualização tem exatamente 45em de largura.
Considerando seu código de exemplo, com algumas regras de estilo reais adicionadas:
@media (max-width: 20em) {
.sidebar { display: none; }
}
@media (min-width: 20em) and (max-width: 45em) {
.sidebar { display: block; float: left; }
}
Quando a janela de visualização do navegador tiver exatamente 20em de largura, ambas as consultas de mídia retornarão verdadeiras. Pela cascata, display: blocksubstitui display: nonee float: leftserá aplicado a qualquer elemento da classe .sidebar.
Você pode pensar nisso como aplicar regras como se as consultas de mídia não estivessem lá para começar:
.sidebar { display: none; }
.sidebar { display: block; float: left; }
Outro exemplo de como a cascata ocorre quando um navegador corresponde a duas ou mais consultas de mídia pode ser encontrado nesta outra resposta .
Esteja avisado, entretanto, que se você tiver declarações que não se sobrepõem em ambas as @mediaregras, todas essas regras serão aplicadas. O que acontece aqui é uma união das declarações em ambas as @mediaregras, não apenas a última anulando completamente a primeira ... o que nos leva à sua pergunta anterior:
Como espaçamos as consultas de mídia com precisão para evitar sobreposições?
Se você deseja evitar a sobreposição, simplesmente precisa escrever consultas de mídia que sejam mutuamente exclusivas.
Lembre-se de que os prefixos min-e max-significam "mínimo inclusivo" e "máximo inclusive"; isso significa (min-width: 20em)e (max-width: 20em)corresponderá a uma janela de visualização com exatamente 20em de largura.
Parece que você já tem um exemplo, o que nos leva à sua última pergunta:
Já vi pessoas usarem: coisas como 799 px e 800 px, mas e uma largura de tela de 799,5 px? (Obviamente, não em uma tela normal, mas em uma retina?)
Não estou totalmente certo disso; todos os valores de pixel em CSS são pixels lógicos, e tenho sido muito pressionado para encontrar um navegador que relataria um valor de pixel fracionário para a largura de uma janela de visualização. Eu tentei experimentar alguns iframes, mas não consegui encontrar nada.
Pelos meus experimentos, parece que o Safari no iOS arredonda todos os valores de pixel fracionário para garantir que qualquer um dos max-width: 799pxe min-width: 800pxcorresponderá, mesmo se a janela de visualização for realmente 799,5 px (o que aparentemente corresponde ao anterior).
1 Embora nada disso seja explicitamente declarado no módulo Regras condicionais ou no módulo Cascade (o último dos quais está atualmente programado para uma reescrita), a cascata está implícita para ocorrer normalmente, uma vez que a especificação simplesmente diz para aplicar estilos em qualquer e todas as @mediaregras que correspondem ao navegador ou mídia.