Consultas de mídia

Os designers podem ajustar os designs para acomodar os usuários. O exemplo mais claro disso é o formato do dispositivo do usuário, a largura, a proporção do dispositivo e assim por diante. Usando 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 de CSS) e podem ser usadas para vários casos de uso.

Segmentar diferentes tipos de saída

Os sites costumam ser exibidos nas telas, mas o CSS também pode ser usado para estilizar sites para outros resultados. Talvez você queira que suas páginas da Web tenham uma aparência diferente na tela e na impressão. Isso é possível com a consulta de tipos de mídia.

Neste exemplo, a cor de fundo está definida como cinza. No entanto, se a página for impressa, a cor de plano de fundo precisa 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 @media na folha de estilo dessa forma 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 o CSS, ele terá automaticamente um valor de tipo de mídia 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 será aplicado somente se o tipo de mídia corresponder e a condição também for verdadeira. Essas condições são chamadas de recursos de mídia.

Esta é a sintaxe das consultas de mídia:

@media type and (feature)

Você poderá 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 no modo retrato (a altura da janela de visualização é maior que a largura). Use um recurso de mídia chamado orientation para testar se:

@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 deixá-lo de fora 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 o uso de folhas de estilos separadas para diferentes tipos de mídia, como print, possa ser aceitável, provavelmente não é uma boa ideia usar uma folha de estilos separada para cada consulta de mídia. Use @media at-rules em vez disso.

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

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

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 sensato 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 consultas de mídia:

@media (min-width: 50em) and (max-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 conteúdo, e não nos tamanhos de dispositivo mais comuns, porque eles estão sujeitos a mudanças a cada ciclo de lançamento de tecnologia.

Nesse exemplo, 50em é o ponto em que as linhas de texto se tornam desconfortavelmente longas. Portanto, 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 terão que rolar para baixo uma coluna e depois rolar de volta para chegar ao topo da segunda coluna. Seria mais seguro aplicar as colunas somente quando a janela de visualização tiver largura e altura suficientes.

É possível combinar consultas de mídia para que os estilos sejam aplicados somente quando todas as condições forem verdadeiras. Neste exemplo, a viewport precisa ter pelo menos 50em de largura e 60em 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: 60em) {
  article {
    column-count: 2;
  }
}

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

Teste seu conhecimento

Teste seus conhecimentos sobre consultas de mídia responsivas.