O que é?

O @media screen é uma regra do CSS usada para definir diferentes estilos dependendo do tipo ou tamanho da tela onde a página é exibida. É essencial para criar páginas responsivas que se adaptam automaticamente a computadores, tablets e celulares.

Sintaxe básica:

css
@media screen and (condição) {
   /* estilos aplicados se a condição for verdadeira */
}

• @media → indica o início de uma consulta (media query).
• screen → tipo de mídia: tela (computador, celular, tablet).
• (condição) → uma condição específica, geralmente largura, altura ou orientação.

Exemplo prático:

Imagine que você queira mudar a cor de fundo para dispositivos menores que 600px:

body {
   background-color: white; /* padrão */
}

/* Apenas para telas menores que 600px */
@media screen and (max-width: 600px) {
   body {
      background-color: blue;
   }
}

Condições mais comuns:

Exemplo com múltiplas condições (entre 400px e 800px):

css
@media screen and (min-width: 400px) and (max-width: 800px) {
   /* estilos específicos */
}

Sintaxe básica:

css

@media screen and (condição) {
   /* estilos aplicados se a condição for verdadeira */
}

• @media → indica o início de uma consulta (media query).
• screen → tipo de mídia: tela (computador, celular, tablet).
• (condição) → uma condição específica, geralmente largura, altura ou orientação.

Exemplo prático:

Imagine que você queira mudar a cor de fundo para dispositivos menores que 600px:

css

body {
   background-color: white; /* padrão */
}

/* Apenas para telas menores que 600px */
@media screen and (max-width: 600px) {
   body {
      background-color: blue;
   }
}