Consultas de mídia

Os designers podem ajustar os designs para acomodar os usuários. O exemplo mais claro disso é o formato do dispositivo de um usuário: largura, proporção e outros aspectos. Com as consultas de mídia, os designers podem responder a esses diferentes formatos.

As consultas de mídia são iniciadas com a palavra-chave @media (uma regra at do CSS) e podem ser usadas em vários casos de uso.

Segmentar diferentes tipos de saída

Os sites geralmente são exibidos em telas, mas o CSS também pode ser usado para estilizar sites para outras saídas. Talvez você queira que suas páginas da Web tenham uma aparência na tela e outra quando impressas. Consultar tipos de mídia torna isso possível.

Neste exemplo, a cor de segundo plano está definida como cinza. Mas se a página for impressa, a cor do plano de fundo deverá ser transparente. Isso economiza a tinta da impressora do usuário.

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

Você pode usar a regra at @media na sua folha de estilo assim: ou criar uma folha de estilo separada e usar o atributo media em um elemento link:

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

Se você não especificar nenhum tipo de mídia para seu CSS, ele vai receber automaticamente o valor all. Estes dois blocos de CSS são equivalentes:

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

Estas duas linhas de HTML também são equivalentes:

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

<link rel="stylesheet" href="global.css" media="all">

Condições da consulta

É possível adicionar condições aos tipos de mídia. Elas são chamadas de consultas de mídia. O CSS só é aplicado se o tipo de mídia corresponder e a condição também for verdadeira. Essas condições são chamadas de atributos de mídia.

Esta é a sintaxe das consultas de mídia:

@media type and (feature)

É possível usar consultas de mídia em um elemento link se os estilos estiverem em uma folha de estilo separada:

<link rel="stylesheet" href="specific.css" media="type and (feature)">

Digamos que você queira aplicar estilos diferentes dependendo se a janela do navegador está no modo paisagem (a largura da janela de visualização é maior que a altura) ou retrato (a altura da janela de visualização é maior que a largura). Há um recurso de mídia chamado orientation que você pode usar para testar isso:

@media all and (orientation: landscape) {
   /* Styles for landscape mode. */
}

@media all and (orientation: portrait) {
   /* Styles for portrait mode. */
}

Ou, se preferir ter folhas de estilo separadas:

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

Nesse caso, o tipo de mídia é all. Como esse é o valor padrão, você pode omiti-lo se quiser:

@media (orientation: landscape) {
   /* Styles for landscape mode. */
}

@media (orientation: portrait) {
   /* Styles for portrait mode. */
}

Ou usando folhas de estilo separadas:

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

Embora usar folhas de estilo separadas para diferentes tipos de mídia, como print, possa ser aceitável, provavelmente não é uma boa ideia usar uma folha de estilo separada para cada consulta de mídia. Em vez disso, use as regras at @media.

Ajustar estilos com base no tamanho da janela de visualização

Para design responsivo, um dos recursos de mídia mais úteis envolve as dimensões da janela de visualização do navegador. Para aplicar estilos quando a janela do navegador for mais larga do que uma determinada largura, use min-width.

@media (min-width: 400px) {
  /* Styles for viewports wider than 400 pixels. */
}

Use o recurso de mídia max-width para aplicar estilos abaixo de uma determinada largura:

@media (max-width: 400px) {
  /* Styles for viewports narrower than 400 pixels. */
}

Essa consulta de mídia também pode ser escrita usando o recurso de mídia width e o operador menor ou igual a.

@media (width <= 400px) {
  /* Styles for viewports narrower than 400 pixels. */
}

Você pode usar qualquer unidade de comprimento do CSS nas consultas de mídia. Se o conteúdo for principalmente baseado em imagens, os pixels podem ser mais adequados. Se o conteúdo for principalmente baseado em texto, provavelmente será mais adequado usar uma unidade relativa baseada no tamanho do texto, como em ou ch:

@media (min-width: 25em) {
  /* Styles for viewports wider than 25em. */
}

Também é possível combinar consultas de mídia para aplicar mais de uma condição. Use a palavra and para combinar suas media queries:

@media (min-width: 50em) and (max-width: 60em) {
  /* Styles for viewports wider than 50em and narrower than 60em. /*
}

Isso também pode ser escrito usando a sintaxe de intervalo.

@media (50em <= width <=60em) {
  /* Styles for viewports wider than 50em and narrower than 60em. */
}

Escolha pontos de interrupção com base no conteúdo

O ponto em que uma condição de recurso de mídia se torna verdadeira é chamado de ponto de interrupção. É melhor escolher os pontos de interrupção com base no seu conteúdo, em vez de tamanhos de dispositivos populares, já que eles estão sujeitos a mudanças a cada ciclo de lançamento de tecnologia.

Neste exemplo, 50em é o ponto em que as linhas de texto ficam muito longas. Assim, um ponto de interrupção é criado para tornar a interface mais legível. Usando a propriedade column-count, o texto é dividido em duas colunas a partir desse ponto.

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

Combinações

É possível usar consultas de mídia com base na altura da janela de visualização, não apenas na largura. Isso pode ser útil para otimizar o conteúdo da interface "acima da dobra". No exemplo anterior, se os leitores estiverem usando uma janela de navegador larga, mas curta, eles precisarão rolar para baixo uma coluna e depois rolar para cima para chegar ao topo da segunda coluna. É mais seguro aplicar as colunas somente quando a janela de visualização for larga e alta o suficiente.

É possível combinar media queries para que os estilos sejam aplicados apenas quando todas as condições forem verdadeiras. Neste exemplo, a janela de visualização precisa ter pelo menos 50em de largura e 30em de altura para que os estilos de coluna sejam aplicados. Esses pontos de interrupção foram escolhidos com base na quantidade de conteúdo.

@media (min-width: 50em) and (min-height: 30em) {
  article {
    column-count: 2;
  }
}

Você também pode usar as palavras-chave or e not para expressar situações mais complexas quando quiser aplicar estilos. Esses testes podem ser logicamente difíceis de analisar. Por isso, verifique se eles estão funcionando e interagindo como esperado.

@media not ((width >= 30em) or (orientation: landscape)) {
  /* These styles won't be shown if the viewport is wider than 30em, or if the orientation is landscape. */
  .navlist {
    flex-direction: column;
  }
}

Esses exemplos mostram como as media queries podem ser usadas para adaptar designs ao formato do dispositivo de um usuário, mas isso é apenas uma pequena parte das possibilidades. As consultas de mídia podem ir muito além da largura e da altura, acessando as preferências do usuário para recursos de acessibilidade e cores de tema. Usar consultas de mídia para fazer ajustes de layout é um ótimo começo para um design responsivo, que se baseia nesses recursos e muito mais.

Teste seu conhecimento

Teste seus conhecimentos sobre consultas de mídia responsivas.