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

245

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?

css media-queries

— Yarin
fonte

306

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:

@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.
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/

— Paul D. Waite
fonte

quando a tela largura é superior a 1200px como especificar em @media tela

— sanoj Lawrence

2

você pode simplesmente usar (largura mínima: 1200px) em vez de largura máxima, ou apenas pode ter como CSS comum sem uma consulta de mídia e usar 'largura máxima' para sobrescrever isso quando se trata de um dispositivo menor

— MintWelsh

Existe uma maneira de afetar o estilo apenas na área de trabalho (NÃO é móvel) enquanto você redimensiona a janela de visualização? Portanto, se eu redimensionasse manualmente meu navegador para 'largura máxima de 720px de largura', ele usaria uma declaração de mídia que detecta você em um desktop não móvel, e agora você está abaixo de 720px, por exemplo?

— Wharfdale

@ JordanC26: parece que você está fazendo uma pergunta e, para isso, deseja o botão "Fazer pergunta" no canto superior direito da tela. Antes de usar isso, no entanto, convém definir o que você quer dizer com "desktop" e "móvel". Um Microsoft Surface é móvel ou desktop? Por quê? E os dispositivos futuros que ainda não foram inventados?

— Paul D. Waite

55

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/

— Chris Bentley
fonte

10

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 ..

— Lorenzo
fonte

3

Eu não assumiria que ele sabe disso.

— jcolebrand

6

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 .

— yehanny
fonte

5

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

— Crozin
fonte

2

Eu alterei a sua ligação com a hashlink aqui -> w3.org/TR/css3-mediaqueries/#media0 em vez de para aqui -> w3.org/TR/css3-mediaqueries

— jcolebrand

1

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

— Kumar Nitesh
fonte

1

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.

— Anup
fonte

0

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;
    }
}

— MattB
fonte

0

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.

— Shahin Ghasemi
fonte