No passado, construir um site era muito mais simples. Hoje, o layout de um site deve se adaptar não apenas aos computadores, mas também aos tablets, dispositivos móveis e até TVs.

O desenvolvimento da capacidade do layout de um site que se adapta a qualquer tipo de dispositivo é chamado Design Responsivo da Web e CSS Media Queries é uma das partes mais importantes do Design Responsivo. Neste artigo, examinaremos mais de perto as consultas de mídia e como usá-las em CSS.

Se preferir, você pode assistir a versão em vídeo abaixo:

Uma consulta Mídia é um recurso CSS3 que cria uma página da Web para adaptar seu layout a diferentes tamanhos de tela e tipos de mídia.

Sintaxe

@media media type and (condition: breakpoint) {  // CSS rules}

Podemos segmentar diferentes tipos de mídia sob uma variedade de condições. Se a condição e / ou os tipos de mídia forem atendidos, as regras contidas na consulta de mídia serão aplicadas, caso contrário, não serão.

A sintaxe pode parecer complicada no começo, então vamos explicar uma a uma em detalhes …

@ Regra de mídia

Começamos a definir consultas de mídia com a regra @media e, mais tarde, incluímos as regras CSS nas chaves. A regra @ media também está sendo usada para especificar os tipos de mídia de destino.

@media () {  // CSS rules}

Parêntese

Dentro dos parênteses, definimos uma condição. Por exemplo, quero aplicar um tamanho de fonte maior para dispositivos móveis. Para fazer isso, precisamos definir uma largura máxima que verifique a largura de um dispositivo:

.text {  font-size: 14px;}@media (max-width: 480px) {  .text {    font-size: 16px;  }}

Normalmente, o tamanho do texto será 14 px. No entanto, como aplicamos uma consulta de mídia, ela mudará para 16px quando um dispositivo tiver uma largura máxima de 480px ou menos.

Importante: sempre coloque suas consultas de mídia no final do seu arquivo CSS.

Tipos de mídia

Se não aplicarmos um tipo de mídia, a regra @ media selecionará todos os tipos de dispositivos por padrão. Caso contrário, os tipos de mídia vêm logo após a regra @ media. Existem muitos tipos de dispositivos, mas podemos agrupá-los em 4:

  • tudo – para todos os tipos de mídia
  • impressão – para impressoras
  • tela – para telas de computadores, tablets e smartphones
  • discurso – para leitores de tela que “lêem” a página em voz alta

Por exemplo, quando eu quiser selecionar apenas telas, definirei a palavra-chave da tela logo após a regra @ media e também devo concatenar as regras com a palavra-chave “and”:

@media screen and (max-width: 480px) {  .text {    font-size: 16px;  }}

Pontos de interrupção

Os pontos de interrupção são talvez o termo mais comum que você ouvirá e usará. Um ponto de interrupção é uma chave para determinar quando alterar o layout e adaptar as novas regras nas consultas de mídia. Vamos voltar ao nosso exemplo no início:

@media (max-width: 480px) {  .text {    font-size: 16px;  }}

Aqui, o ponto de interrupção é 480px. Agora, a consulta de mídia sabe quando definir ou substituir a nova classe. Basicamente, se a largura de um dispositivo for menor que 480 px, a classe de texto será aplicada, caso contrário, não será.

Pontos de interrupção comuns: existe uma resolução padrão?

Uma das perguntas mais frequentes é “Qual ponto de interrupção devo usar?”. Existem muitos dispositivos no mercado, portanto não podemos e não devemos definir pontos de interrupção para cada um deles.

Por isso, não podemos dizer que há uma resolução padrão para dispositivos, mas existem alguns pontos de interrupção usados ​​com frequência na programação diária. Se você estiver usando uma estrutura CSS (como Bootstrap, Bulma etc.), também poderá usar seus pontos de interrupção.

Agora vamos ver alguns pontos de interrupção comuns para larguras de dispositivos:

  • 320px – 480px: dispositivos móveis
  • 481px – 768px: iPads, tablets
  • 769px – 1024px: telas pequenas, laptops
  • 1025 px – 1200 px: áreas de trabalho, telas grandes
  • 1201px e mais – Telas grandes, TV

Como eu disse acima, esses pontos de interrupção podem diferir e não existe um padrão exatamente definido, mas esses são alguns dos mais usados.


O design responsivo é essencial no campo de design e desenvolvimento da web de hoje. As consultas de mídia são uma das partes mais importantes na criação de layouts responsivos e espero que você ache minha postagem útil para entender como as consultas de mídia funcionam.

Se você quiser aprender mais sobre desenvolvimento web, sinta-se à vontade para assine o meu canal.

Obrigado pela leitura!



Fonte