Artigo original: How to Set Width Ranges for Your CSS Media Queries
Uma media query (em português, consulta de mídia) é um recurso do CSS. Ela permite que você crie e implemente layouts que se adaptam às propriedades do dispositivo que você está usando. Algumas dessas propriedades incluem a altura e a largura de uma página.
Neste guia, você verá como definir várias propriedades de largura em uma regra de media query. Por enquanto, vamos, primeiramente, dar uma olhada nos fundamentos.
Como funcionam as media queries no CSS
Agora que você tem uma ideia básica do que é uma media query, vamos dar uma olhada em como esse recurso específico do CSS realmente funciona.
Uma media query básica tem a seguinte aparência:
@media only screen and (max-width: 576px) {
// realiza uma ação
}
@media only screen and (min-width: 576px) {
// realiza outra ação
}Isso significa que os estilos que seriam escritos dentro das regras de mídia acima só funcionarão ou serão efetivos nas propriedades de largura especificadas acima.
Literalmente, você está dizendo que, nessa largura específica (ou seja, a propriedade max-width – largura máxima – de 576px), o CSS deve aplicar os estilos selecionados para dentro dessa largura, a partir de uma largura inicial de 0px.
As propriedades max-width e min-width
Há duas coisas que você precisa conhecer ao criar media queries para tamanhos de tela diferentes: as propriedades max-width e min-width.
Quando uma propriedade max-width é passada para uma media query, o CSS a interpreta como uma largura começando em zero – ou seja, se nenhuma propriedade de largura mínima tiver sido definida ainda. Chegaremos a isso em breve.
Quando a propriedade max-width recebe um valor, todos os estilos dentro dessa media query específica serão aplicados a qualquer dispositivo com tamanho de tela que se estenda de 0px até a largura máxima especificada.
A propriedade min-width, por outro lado, usa o valor inicial que você atribuiu a ela e aplica os estilos dentro da regra de mídia até que a próxima largura máxima seja fornecida. Veja, por exemplo, o seguinte:
@media only screen and (min-width: 576px) {
// aplique os estilos aqui a partir dessa largura mínima de
// 576px (telas de dispositivos médias)
}Os estilos que seriam escritos na media query acima só seriam aplicáveis a dispositivos que se enquadram na largura mínima especificada e acima.
Como definir o intervalo de largura de uma media query
O método que acabamos de discutir cria media queries aplicando apenas uma propriedade width, o que resolve apenas um problema.
Ao definir um "intervalo de largura", você tem uma certa flexibilidade ao criar layouts que oferecem capacidade de resposta em todas as larguras de dispositivo.
A definição de um "intervalo de largura" específico não é diferente da maneira como as media queries são criadas. A única diferença é a adição de mais expressões de recursos de mídia (ou seja, os tamanhos de largura da tela).
Observe:
@media only screen and (min-width: 360px) and (max-width: 768px) {
// faça algo nesse intervalo de largura.
}A media query acima funcionará apenas para a expressão do recurso (o tamanho de tela de um dispositivo móvel para o qual você está escrevendo o estilo) fornecida acima.
Ela usa a primeira expressão de largura fornecida como o valor inicial e a segunda como o valor final.
Você se lembra de quando vimos a diferença entre as propriedades max-width e min-width? Simplesmente informamos ao navegador que aplicasse os estilos do CSS que incluímos dentro da regra para dispositivos móveis com telas de 360px a 768px.
De modo simples, estamos criando layouts responsivos para dispositivos de larguras pequenas e médias, como tablets ou celulares.
Você pode ver alguns dos "pontos de corte" (em inglês, breakpoints) disponíveis na documentação do Bootstrap (texto em inglês). Experimente com alguns desses pontos definindo os intervalos de tamanho de tela que você preferir.
Experimente usar media queries com o Flexbox
Você viu como criar uma media query básica que usa várias expressões de tamanho de tela. Você também viu a diferença entre as propriedades max-width e min-width e como aplicá-las.
Nesta seção, examinaremos a criação de um layout simples, no qual a aparência muda de acordo com os diferentes "pontos de corte" (tamanhos de tela). Começaremos criando a marcação que estruturará o layout.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exemplo de media query</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="conteiner">
<div class="caixas caixa1">
<h1>Primeira caixa</h1>
<p>
Informação da primeira caixa
</p>
</div>
<div class="caixas caixa2">
<h1>Segunda caixa</h1>
<p>
Informação da segunda caixa
</p>
</div>
</body>
</html>
O trecho acima exibirá duas caixas com suas respectivas informações quando os estilos são aplicados.
.conteiner {
display: flex;
flex-wrap: wrap;
width: 980px;
margin: 0 auto;
margin-top: 40px;
}
@media only screen and (min-width: 320px) and (max-width: 576px) {
.conteiner {
width: 100%;
padding-left: 23px;
flex-direction: column-reverse;
}
.caixas {
width: 100%;
}
}Observando o arquivo CSS, você perceberá que a media query tem uma largura mínima de 320px e uma largura máxima de 576px. Isso quer dizer, simplesmente, que todos os estilos que entrarem nessa regra se aplicarão apenas aos dispositivos com larguras muito pequenas ou pequenas.
O layout das caixas também muda nesse intervalo de largura específico. Isso se dá em função de o seletor .conteiner ter sua propriedade flex-direction alterada de row para column-reverse.
Você pode decidir se quer experimentar com outros valores atribuíveis à propriedade flex-direction. Saiba mais sobre esses valores aqui.
Conclusão
Sem definir um intervalo de largura, os estilos do CSS do trecho de código acima serão aplicados a todos os dispositivos com um tamanho mínimo de tela de 576px ou acima.
Ao definir um intervalo de largura, você obtém melhor controle como desenvolvedor. Você poderá especificar quais estilos devem ser aplicados a um dispositivo com um tamanho de tela específico, o que dá à aplicação uma responsividade melhor.
Obrigado por ler este artigo. Se ele o ajudou a entender por que você deve definir intervalos de largura ao criar media queries, compartilhe-o.