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. 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 do CSS) e podem ser usadas para vários casos de uso.

Segmentar diferentes tipos de saída

Os sites geralmente aparecem nas 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 unilateral em uma tela, mas diferentes quando impressas. Isso é possível com a consulta a tipos de mídia.

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

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

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

É possível usar a at-rule @media na sua 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 um tipo de mídia para o CSS, ele terá automaticamente o valor de all. Esses dois blocos de CSS são equivalentes:

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

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

Essas 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 a 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). Há um recurso de mídia chamado orientation que pode ser usado 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 deixá-lo de fora se quiser:

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

Ou usar 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 nas regras.

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

Para o 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 certa 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 tamanho CSS nas suas consultas de mídia. Se o conteúdo for principalmente baseado em imagem, talvez o mais adequado seja usar pixels. Se o conteúdo for baseado em texto, provavelmente faz mais sentido 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.
}

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 seus pontos de interrupção com base no seu conteúdo em vez do tamanho dos dispositivos mais usados, 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 do texto ficam desconfortavelmente longas. 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 do navegador larga, mas curta, eles terão que rolar uma coluna para baixo 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 o suficiente.

É possível combinar consultas de mídia para que os estilos se apliquem somente quando todas as condições forem verdadeiras. Neste exemplo, a janela de visualização 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 as consultas de mídia podem ser usadas para adaptar designs ao formato do dispositivo de um usuário, mas são apenas um começo. 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 responsiva.