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, a largura, a proporção do dispositivo e assim por diante. 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 CSS at-rule) e podem ser usadas para 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 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 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 de 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 recursos 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 estilos 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). 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 você 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 omitir esse valor:

@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 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. 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 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 as consultas de mídia:

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

Escolher 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.

Neste exemplo, 50em é o ponto em que as linhas de texto ficam 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 apenas quando a janela de visualização tiver largura e altura suficientes.

É possível combinar consultas de mídia para que os estilos sejam aplicados apenas quando todas as condições forem verdadeiras. Neste exemplo, a viewport 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;
  }
}

Esses exemplos mostram como as consultas de mídia podem ser usadas para adaptar designs ao formato do dispositivo de um usuário, mas eles apenas arranham a superfície das possibilidades. As consultas de mídia podem ir muito além da largura e da altura, aproveitando as preferências do usuário para recursos de acessibilidade e cores do 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.