Media queries são um componente fundamental do design responsivo para web, permitindo que os desenvolvedores apliquem estilos diferentes com base nas características do dispositivo ou navegador do usuário. Eles fornecem uma maneira de personalizar a apresentação do conteúdo para uma variedade de dispositivos sem alterar o próprio conteúdo. No seu núcleo, uma media query consiste em um tipo de mídia e uma ou mais expressões que verificam condições específicas. Se essas condições forem verdadeiras, os estilos correspondentes são aplicados. Este mecanismo permite a criação de designs responsivos que se adaptam a diferentes tamanhos de tela, resoluções e capacidades do dispositivo. A sintaxe básica de uma media query em CSS é assim:

@media mediatype and (feature: value) {
  /* CSS rules go here */
}

Nessa estrutura, mediatype especifica o tipo de mídia ao qual a consulta se aplica e o par feature: value define a condição que deve ser atendida para que os estilos sejam aplicados. Tipos de mídia descrevem a categoria geral de um dispositivo. Vamos falar sobre os tipos de mídia mais comumente usados:

• all é adequado para todos os dispositivos. Este é o padrão se nenhum tipo de mídia for especificado.
• print é destinado para material paginado e documentos visualizados em uma tela no modo de visualização de impressão.
• screen destina-se principalmente a telas.

No passado, havia mais tipos de mídia, como handheld e tv, mas a maioria deles foi descontinuada em favor do uso de features para direcionar dispositivos com mais precisão. As media features descrevem características específicas do agente do usuário, dispositivo de saída ou ambiente. Vamos falar sobre alguns dos recursos de mídia mais comumente usados. O width e height referem-se à largura e altura da viewport e são frequentemente usados com prefixos min- ou max- para consultas de intervalo. Aqui está um exemplo:

@media screen and (min-width: 768px) {
  /* Styles for screens at least 768px wide */
}

aspect-ratio descreve a proporção entre a largura e a altura da viewport. Aqui está um exemplo:

@media screen and (aspect-ratio: 16/9) {
  /* Styles for screens with a 16:9 aspect ratio */
}

O recurso orientation indica se o dispositivo está em orientação paisagem ou retrato. Aqui está um exemplo:

@media screen and (orientation: landscape) {
  /* Styles for landscape orientation */
}

O recurso resolution descreve a resolução do dispositivo de saída em pontos por polegada (dpi) ou pontos por centímetro (dpcm). Aqui está um exemplo:

@media screen and (min-resolution: 300dpi) {
  /* Styles for high-resolution screens */
}

O recurso hover testa se o mecanismo de entrada primário pode pairar sobre os elementos. Aqui está um exemplo:

@media (hover: hover) {
  /* Styles for devices that support hover */
}

O recurso prefers-color-scheme detecta se o usuário solicitou um tema de cor claro ou escuro. Aqui está um exemplo:

@media (prefers-color-scheme: dark) {
  /* Styles for dark mode */
}

Consultas de mídia também podem combinar múltiplas condições usando operadores lógicos. O operador and é usado para combinar múltiplos recursos de mídia, enquanto not e only podem ser usados para negar ou isolar consultas de mídia. Aqui está um exemplo que combina múltiplos recursos:

@media screen and (min-width: 768px) and (orientation: landscape) {
  /* Styles for landscape screens at least 768px wide */
}

Também é possível direcionar múltiplas consultas em uma lista separada por vírgulas, que funciona como um operador "or":

@media screen and (min-width: 768px), print {
  /* Styles for screens at least 768px wide OR for print */
}

Ao trabalhar com media queries, é importante considerar a cascata. Media queries não aumentam a especificidade – elas apenas agrupam regras condicionais. As regras normais da cascata CSS ainda se aplicam dentro de cada media query. Na prática, as media queries são frequentemente usadas para criar layouts responsivos. Um padrão comum é definir um estilo base para dispositivos móveis e depois usar media queries para aprimorar o layout para telas maiores:

<link rel="stylesheet" href="styles.css">

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  <p>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
  <p>Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>

/* Base styles for mobile */
.container {
  width: 100%;
  padding: 15px;
}

/* Styles for tablets */
@media screen and (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* Styles for desktops */
@media screen and (min-width: 1024px) {
  .container {
    width: 960px;
  }
}

Essa abordagem, conhecida como design responsivo "mobile-first", garante que os estilos base sejam adequados para dispositivos móveis com melhorias adicionadas para telas maiores. Em conclusão, media queries são uma ferramenta poderosa no CSS que permite a criação de designs web responsivos e adaptáveis. Ao entender como usar diferentes tipos de mídia e recursos, os desenvolvedores podem criar sites que oferecem experiências de usuário ideais em uma ampla variedade de dispositivos e preferências. À medida que as tecnologias web continuam a evoluir, manter-se atualizado com os novos recursos de mídia pode ajudar a criar designs responsivos mais sofisticados e fáceis de usar.