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. sua 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 em diversos 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 na tela, mas de forma diferente quando impressas. Isso é possível com consultas de 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 de fundo deve 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 at-rule @media na sua folha de estilo assim, ou você pode fazer 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 seu CSS, ele terá automaticamente um valor de tipo de mídia 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. Essas são as chamadas 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 para 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 sua altura) ou 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 usar folhas de estilo separadas para diferentes tipos de mídia, como print, possa ser adequado, provavelmente não é uma boa ideia usar uma folha de estilo separada para cada consulta de mídia. Em vez disso, 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 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 de CSS nas suas consultas de mídia. Caso seu conteúdo seja baseado principalmente em imagens, os pixels podem fazer mais sentido. Se seu conteúdo for principalmente 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.
}

Você também pode 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 em tamanhos de dispositivos muito usados. pois estão sujeitos a alterações a cada ciclo de lançamento de tecnologia.

Nesse exemplo, 50em é o ponto em que as linhas de texto se tornam desconfortavelmente 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 larga, mas curta do navegador, eles precisam rolar uma coluna para baixo e depois rolar de volta para cima 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 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 consultas de mídia podem ser usadas para adaptar designs ao formato do dispositivo de um usuário, mas isso é apenas a superfície de possibilidades. As consultas de mídia podem ir muito além da largura e da altura, acessar 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.