Iniciando com Media Queries no CSS

Você provavelmente já passou por aquela situação em que, após criar um projeto interessante, ao testá-lo em um tablet ou celular, percebe que tudo parece desorganizado e visualmente desagradável. É nesse momento que entra em cena uma técnica muito útil do CSS, conhecida como Media Queries.

O Que São Media Queries?

Media queries são uma técnica no CSS que permite ao desenvolvedor aplicar estilos condicionalmente com base nas características da mídia que está sendo usada pelo dispositivo do usuário, como o tamanho da tela, a orientação (retrato ou paisagem) e a resolução.

Elas são uma ferramenta fundamental para o design responsivo, permitindo que os websites se adaptem e funcionem de maneira otimizada em diferentes dispositivos.

Principais Motivos para Usar Media Queries

• Flexibilidade: Media queries permitem que você crie designs que se adaptam automaticamente a diferentes tamanhos de tela e orientações, oferecendo uma experiência mais personalizada e acessível.
• Melhoria na Experiência do Usuário: Um site que se ajusta para caber na tela do dispositivo do usuário, seja um telefone celular, tablet ou desktop, proporciona uma navegação mais fácil e agradável.
• Manutenção do Site: Facilita a manutenção do site ao permitir que você use um único conjunto de HTML e CSS que funciona em todos os dispositivos, ao invés de criar versões separadas para cada dispositivo.
• SEO (Search Engine Optimization): Sites responsivos tendem a ter uma classificação melhor em motores de busca, pois eles oferecem uma melhor experiência ao usuário.

Agora que já temos uma ideia do que é, vamos colocar a mão na massa!

Como Usar Media Queries

Para usar media queries, você define condições no CSS que mudam o estilo do elemento quando certos critérios são atendidos. Por exemplo, você pode querer mudar o layout de uma página quando a largura da tela é menor do que 600 pixels. Abaixo está a sintaxe básica para essa ação:

@media only screen and (max-width: 600px) {
  /* Estilos aplicados quando a condição é atendida */
}

Benefícios das Media Queries

• Adaptabilidade: Adaptam-se a qualquer tamanho de tela, melhorando a legibilidade e a usabilidade em dispositivos móveis.
• Custo-efetividade: Reduzem a necessidade de desenvolver diferentes versões de um site para diferentes dispositivos.
• Melhor desempenho: Carregam apenas os estilos necessários para o dispositivo específico, o que pode melhorar o tempo de carregamento da página.

Agora, um exemplo prático, vamos supor que você quer dividir um bloco em duas partes iguais e quando a tela for menor, apenas uma parte. Vamos iniciar o bloco básico com display GRID, e se ainda não conhece essa delicinha do CSS, clique aqui que explicamos com mais detalhes!

/* Estilos para telas maiores */
.bloco {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
}

/* Estilos para telas menores que 600px */
@media (max-width: 600px) {
  .bloco {
    grid-template-columns: 1fr;
  }
}

Temos também a possibilidade combinar diferentes tamanhos de tela, com min-width e max-width:

/* Estilos para resolução entre 1200px e 1430px */
@media (min-width: 1200px) and (max-width: 600px) {
  .bloco {
    grid-gap: 50px;
  }
}

Além das condições baseadas no tamanho da tela, como max-width e min-width, você também pode utilizar media queries para especificar tipos de mídia diferentes, como screen, e orientações de tela, como retrato (portrait) e paisagem (landscape). Isso permite ainda mais controle sobre como os estilos são aplicados em diferentes cenários.

Uso de screen em Media Queries

O screen é um tipo de mídia usado para indicar que os estilos devem ser aplicados quando o dispositivo possui uma tela, como um desktop, laptop, tablet ou smartphone. Isso é útil para diferenciar estilos que devem ser aplicados especificamente em telas, em contraste com outras mídias como impressoras (print).

Este código aplica o background-color apenas quando o dispositivo tem uma tela com largura mínima de 768 pixels. Isso ignora dispositivos que não são telas, como impressoras:

@media screen and (min-width: 768px) {
  body {
    background-color: lightgreen;
  }
}

Diferenciando entre Retrato e Paisagem

A orientação da tela pode ser uma informação crítica, especialmente para dispositivos móveis e tablets, permitindo que você refine ainda mais seu design responsivo.

• Retrato (portrait): Esta orientação é mais alta do que larga. É comum em telefones celulares quando segurados na posição padrão.
• Paisagem (landscape): Esta orientação é mais larga do que alta. É comum em tablets e laptops, especialmente quando visualizando vídeos ou utilizando em apresentações.

Neste exemplo abaixo, o tamanho da fonte do corpo do documento é ajustado dependendo da orientação da tela. Isso é útil para garantir que o texto permaneça legível e bem dimensionado tanto em orientação retrato quanto paisagem.

/* Estilos para dispositivos em orientação retrato */
@media screen and (orientation: portrait) {
  body {
    font-size: 14px;
  }
}

/* Estilos para dispositivos em orientação paisagem */
@media screen and (orientation: landscape) {
  body {
    font-size: 16px;
  }
}

Combinando Condições

Você também pode combinar várias condições dentro de uma media query para atender a cenários específicos. Por exemplo, você pode querer aplicar estilos apenas para telas em orientação paisagem e com uma largura mínima.

Este exemplo abaixo configura estilos para um container apenas em dispositivos com tela em orientação paisagem e largura de pelo menos 1024 pixels. Este tipo de detalhamento ajuda a otimizar o layout e a experiência do usuário para diferentes dispositivos e orientações.

@media screen and (min-width: 1024px) and (orientation: landscape) {
  .container {
    max-width: 960px;
    margin: auto;
  }
}

Combinar screen, tipos de orientação e outras características dentro de media queries oferece um nível de precisão muito alto para designers e desenvolvedores criarem experiências verdadeiramente responsivas e personalizadas.

Conclusão

Media queries são essenciais para criar uma experiência de usuário robusta e responsiva em diversos dispositivos. Ao usá-las estrategicamente, você pode garantir que seu site seja acessível, esteticamente agradável e funcional para todos os usuários, independentemente do dispositivo que eles estejam usando.