Media Queries §

---

As Media Queries permitem que um site se adapte a diferentes tamanhos de tela e tipos de mídia. Isso é crucial para garantir uma experiência de usuário consistente em dispositivos variados, desde telas de computadores até dispositivos móveis.

Sintaxe §

A estrutura de uma Media Query envolve a regra @media, seguida por condições e blocos de código CSS.

@media tipo-de-midia and (condicao) {
  /* Regras de CSS a serem aplicadas se a condição for atendida */
}

Operadores lógicos §

Os operadores lógicos são componentes fundamentais nas Media Queries, permitindo a construção de condições mais sofisticadas para adaptar estilos com precisão a diferentes contextos.

Combinação de condições (and) §

O operador and é utilizado para criar condições onde ambas as expressões devem ser verdadeiras para que as regras de estilo dentro da Media Query sejam aplicadas.

@media (max-width: 768px) and (orientation: portrait) {
  /* Aplica estilos quando a largura é inferior a 768px e a orientação é retrato */
}

Alternância entre condições (or) §

O operador or é utilizado para aplicar estilos se pelo menos uma das expressões for verdadeira.

@media (min-width: 768px) or (orientation: landscape) {
  /* Aplica estilos se a largura for superior a 768px ou se a orientação for paisagem */
}

Negação de condição (not) §

O operador not é empregado para inverter a lógica da condição, aplicando estilos apenas quando a expressão é falsa.

@media not screen and (max-width: 600px) {
  /* Aplica estilos se não for uma tela e a largura não ultrapassar 600px */
}

Tipos de mídia §

Os tipos de mídia indicam o contexto em que as regras CSS devem ser aplicadas. Os quatro tipos principais são:

• all: Aplica a regra a todos os tipos de mídia (padrão).
• screen: Destinado a dispositivos com telas, como computadores e tablets.
• print: Aplicado quando a página é impressa.
• speech: Projetado para leitores de tela.

Breakpoints §

Breakpoints são pontos específicos em que o layout da página é ajustado para melhor se adequar ao tamanho da tela. Eles são essenciais para garantir que a experiência do usuário seja otimizada em diferentes dispositivos.

A seguir alguns breakpoints comuns em termos de larguras dos dispositivos:

• 320px - 480px: dispositivos móveis
• 481px - 768px: iPads, tablets
• 769px - 1024px: telas pequenas, laptops
• 1025px - 1200px: desktops, telas grandes
• 1201px e acima:   telas muito grandes, TVs

@media (max-width: 768px) {
  /* Regras de CSS para telas menores que 768px (ex: tablets) */
}

Abordagem Mobile First §

A abordagem “Mobile First” é uma prática recomendada, onde o design inicial é otimizado para dispositivos móveis e, em seguida, é expandido para telas maiores. Isso contribui para páginas mais leves e uma melhor adaptação às diferentes condições de exibição.

/* Estilos base para dispositivos móveis */
body {
  font-size: 16px;
}
 
/* Media Query para telas maiores */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado