Quais são as regras para sobreposição de consulta de mídia CSS?

Como espaçamos as consultas de mídia com precisão para evitar sobreposições?

Por exemplo, se considerarmos o código:

@media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport */ } @media (min-width: 45em) { /* everything else */ } 

O que acontecerá em todos os navegadores de suporte, exatamente em 20em e 45em?

Eu já vi pessoas usarem: coisas como 799px e depois 800px, mas que tal uma largura de canvas de 799,5 px? (Obviamente não em uma exibição regular, mas uma retina?)

Estou mais curioso sobre a resposta aqui considerando a especificação.

    Quais são as regras para sobreposição de consulta de mídia CSS?

    Cascata.

    @media regras @media são transparentes para a cascata, portanto, quando duas ou mais regras @media coincidem ao mesmo tempo, o navegador deve aplicar os estilos em todas as regras correspondentes e resolver a cascata de acordo. 1

    O que acontecerá em todos os navegadores de suporte, exatamente em 20em e 45em?

    Com exatamente 20 m de largura, sua primeira e segunda consulta de mídia será igual. Os navegadores aplicarão estilos nas regras @media e em cascata de acordo, portanto, se houver alguma regra conflitante que precise ser substituída, a última declarada vence (respondendo por seletores específicos !important , etc). Da mesma forma, para a segunda e terceira consulta de mídia quando a viewport tiver exatamente 45º de largura.

    Considerando o 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 viewport do navegador é exatamente 20em largura, essas duas consultas de mídia retornarão true. Pela cascata, display: block substituição de display: block display: none e float: left serão aplicados em qualquer elemento com a class .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 nessa outra resposta .

    Esteja avisado, porém, que se você tiver declarações que não se sobreponham nas duas regras @media , todas essas regras serão aplicadas. O que acontece aqui é uma união das declarações em ambas as regras @media , 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ê quiser evitar a sobreposição, basta escrever consultas de mídia que sejam mutuamente exclusivas.

    Lembre-se que os prefixos min- e max- significam “mínimo inclusivo” e “máximo inclusivo”; Isso significa que (min-width: 20em) e (max-width: 20em) corresponderão a uma viewport com exatamente 20µ de largura.

    Parece que você já tem um exemplo, o que nos leva à sua última pergunta:

    Eu já vi pessoas usarem: coisas como 799px e depois 800px, mas que tal uma largura de canvas de 799,5 px? (Obviamente não em uma exibição regular, mas uma retina?)

    Isso eu não tenho certeza; Todos os valores de pixel em CSS são pixels lógicos e tenho dificuldade em encontrar um navegador que relate um valor de pixel fracionário para uma largura de viewport. Eu tentei experimentar com alguns iframes mas não consegui chegar a nada.

    A partir dos meus experimentos, o Safari no iOS arredonda todos os valores de pixels fracionários para garantir que um dos max-width: 799px e min-width: 800px coincida, mesmo se o viewport for realmente 799.5px (que aparentemente coincide com o anterior).


    1 Embora nada disso seja explicitamente declarado no módulo Conditional Rules ou no módulo Cascade (o último está atualmente programado para uma reescrita), a cascata está implícita para ocorrer normalmente, já que a especificação simplesmente diz para aplicar estilos em qualquer e todas as regras @media que correspondem ao navegador ou mídia.

    calc() pode ser usado para contornar isso (min-width: 50em and max-width: calc(50em - 1px) será corretamente empilhado), mas o suporte do navegador é ruim e eu não recomendaria isso.

     @media (min-width: 20em) and (max-width: calc(45em - 1px)) { /* slightly wider viewport */ } 

    Infos:

    Alguns outros mencionados, não usando a unidade em ajudar no empilhamento de consultas.