O que significa @media screen e (max-width: 1024px) em CSS?

Encontrei esse pedaço de código em um arquivo CSS que herdei, mas não consigo entender nada:

@media screen and (max-width: 1024px){
    img.bg {
        left: 50%;
        margin-left: -512px; }
}

Especificamente, o que está acontecendo na primeira linha?

Essa é uma consulta de mídia. Impede que o CSS dentro dele seja executado, a menos que o navegador passe nos testes que ele contém.

Os testes nesta consulta de mídia são:

1. @media screen- O navegador se identifica como estando na categoria "tela". Isso significa aproximadamente o navegador se considera desktop-class - ao contrário, por exemplo, um mais velho browser do telefone móvel (note que o iPhone, e outros navegadores de smartphones, que se identificam como sendo na categoria de tela), ou um leitor de tela - e que está exibindo a página na tela, em vez de imprimi-la.

2. max-width: 1024px- a largura da janela do navegador (incluindo a barra de rolagem) é 1024 pixels ou menos. ( Pixels CSS, não pixels do dispositivo .)

Esse segundo teste sugere que isso visa limitar o CSS ao iPad, iPhone e dispositivos similares (porque alguns navegadores mais antigos não suportam max-widthconsultas de mídia e muitos navegadores de desktop são executados com mais de 1024 pixels).

No entanto, ele também se aplicará a janelas do navegador de desktop com menos de 1024 pixels de largura, em navegadores que suportam a max-widthconsulta de mídia.

Aqui está a especificação das consultas de mídia, é bastante legível:

• http://www.w3.org/TR/css3-mediaqueries/

Ele limita os estilos definidos na tela (por exemplo, não imprime ou outra mídia) e limita ainda mais o escopo às viewports com largura de 1024 px ou menos.

http://www.css3.info/preview/media-queries/

Ele diz: Quando a página renderizar na tela com uma resolução máxima de 1024 pixels de largura, aplique a regra a seguir.

Como você já deve saber, pode direcionar alguns CSS para um tipo de mídia que pode ser portátil, de tela, impressora e assim por diante.

Dê uma olhada aqui para mais detalhes ..

No meu caso, eu queria centralizar meu logotipo em um site quando o navegador tivesse 800pxou menos, então fiz isso usando a @mediatag:

@media screen and (max-width: 800px) {
  #logo {
    float: none;
    margin: 0;
    text-align: center;
    display: block;
    width: auto;
  }
}

Funcionou para mim, espero que alguém ache esta solução útil. :) Para mais informações, consulte isso .

Isso é consultas de mídia . Permite aplicar parte das regras CSS apenas aos dispositivos específicos em uma configuração específica.

Isso significa que se o tamanho da tela for 1024, aplique somente abaixo das regras CSS.

Se sua condição de consulta de mídia for verdadeira, seu CSS com essa condição funcionará. Isso significa que o CSS no tamanho de pixel da condição da sua consulta de mídia será afetado; caso contrário, se a condição falhar, isso significa que se a largura do dispositivo for maior que 1024px do que o seu CSS não funcionará. Porque sua condição de consulta de mídia é falsa.

max-width é o seu limite máximo de CSS até essa largura.

Também vale a pena notar que você pode usá-los, bem como 'px' - blogs e sites baseados em texto fazem isso porque o navegador toma decisões de layout mais relativas ao conteúdo do texto.

No Wordpress, vinte e dezesseis anos, eu queria que meu slogan fosse exibido em celulares e em desktops, então coloquei isso no meu tema filho style.css

@media screen and (max-width:59em){
    p.site-description {
        display:    block;
    }
}

Ele tem como alvo algum recurso especificado para executar outros códigos ...

Por exemplo:

@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;

  }

o snippet acima diz que se o dispositivo que executa este programa tiver uma tela com largura de 600px ou menor que 600px, nesse caso, nosso programa deve executar esta parte.