Utilizando CSS Media Queries

Neste artigo vamos falar sobre Media Queries, que é a utilização de Media Types com uma ou mais expressões envolvendo características de uma media para definir formatações para diversos dispositivos. Os browsers ou as aplicações lêem as expressões definidas na Query, caso o dispositivo em questão se encaixe nessas requisições o CSS será aplicado.

Explicando o que é Media types

Os media types definem para que tipo de media um certo código CSS é direcionado. O HTML foi gerado para ser portátil, ou seja, lido e interpretado por qualquer tipo de dispositivo. Só que cada dispositivo exibe o HTML de uma maneira, devido a fatores como, por exemplo, as dimensões da tela. Supondo que visatamos um site através de um desktop, ele não terá a mesma reação de que se visitarmos por um dispositivo móvel. Isso ocorre porque são dispositivos diferentes e formas diferentes de navegação.

Para que possamos manter nossas páginas sempre adequadas a cada tipo de visualização, utilizamos os media types, que são listados abaixo de acordo com sua utilização.

• All: Para todos os dispositivos.
• Braille: Para dispositivos táteis.
• Embossed: Para dispositivos que imprimem em braile.
• Handheld: Para dispositivos portáteis, geralmente com telas pequenas e banda limitada.
• Print: Para impressão em papel.
• Projection: Para apresentações como PPS.
• Screen: Para monitores ou dispositivos com telas coloridas e resolução adequada.
• Speech: Para sintetizadores de voz. As CSS 2 tem uma especificação de CSS chamada Aural, onde podemos formatar a voz dos sintetizadores.
• Tty: Para dispositivos que possuem uma grade fixa para exibição de caracteres, tais como: Teletypes, Terminais e também dispositivos portáteis com display limitados.
• Tv: Para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitados.

Observação: Os nomes das medias são todas case-sensitive, ou seja, letras maiúsculas e minúsculas são diferenciadas.

Media Queries - Problemas

Os problemas das media queries são que cada vez mais surgem dispositivos com diversos tamanhos e também com hardwares bem parecidos aos dos desktops, fazendo com que esses dispositivos tenha uma navegação quase igual aos dos desktops. Podemos citar como exemplo o iPhone, sua tela tem excelente qualidade e seu navegador reproduz as páginas como um navegador comum de desktop). Assim não há a necessidade de preparar um layout e um CSS com media type Handheld para o iPhone, pois mesmo ele sendo um Handheld, ele não trabalha como um, porém, é importante frisar que ele também não trabalha exatamente como um desktop. Mesmo a renderização do MobileSafari sendo idêntica ao de um desktop, existe a questão do comportamento do usuário e a forma de navegação que são diferentes. Assim ficamos em um meio termo, nem podendo disponibilizar um CSS específico para Handheld e nem um CSS totalmente Screen.

Media Queries – Solução

A solução é que as media queries definem condições de um CSS especifico, isso significa que se essas condições forem aprovadas, ou seja, se o dispositivo se adequar a todas as condições, o CSS será aplicado.

<link rel=”styleSheet” href=”estilo.css” media=”screen and (color)” />

Nesse código determinamos que o CSS só seja aplicado aos dispositivos de media Screen que possuam uma característica color. Dessa forma o CSS não será aplicado em dispositivos monocromáticos. Assim conseguirmos corrigir esse problema específico.

Operadores Lógicos

Nas media queries são utilizados três operadores lógicos: not, or e only.

• Not: Gera uma sentença de negação

  
  <link rel=”styleSheet” href=”estilo.css” media=”All and (not color)” />

  Listagem 2. Usando o operador logico Not

  Dessa maneira deixamos disponível também para dispositivos monocromáticos, pois estamos negando o atributo color.

• Only: Não mostra os estilos do Browser que não reconhecem media queries, para ser utilizado basta utilizar a palavra only antes media desejada. Vejamos um exemplo.

  
  <link rel=”styleSheet” href=”estilo.css” media=”Only screen and (color)” />

  Listagem 3. Usando o operador logico OnlyE
• Or: Serve para usar varias medias juntas, podendo ser substituído por uma vírgula “,”.

  
  <link rel=”styleSheet” href=”estilo.css” media=”All and (color), projection and (color)” />

  Listagem 4. Trocando o operador or por vírgula

  Se qualquer uma das medias definidas forem verdadeiras, o CSS será aplicado.

Media Feature

Para diferenciamos um dispositivo do outro, precisamos utilizar as características de cada um, para isso utilizamos as media features, que reconhecem certos recursos do dispositivo no qual está sendo visualizada a página. Abaixo temos um exemplo.

<link rel="stylesheet" href="estilo.css" media="screen and (max-width: 480px)" />

No exemplo acima determinamos que o CSS apenas seja aplicado aos dispositivos de media screen e com resolução máxima de 480px.

Há uma variedade de características que podemos utilizar para identificar os dispositivos que desejarmos. Veja a lista com alguma dessas características:

• width
• height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• scan
• grid

Agora vamos por o que aprendemos até aqui em pratica. Para iniciar vamos começar criando uma folha de estilos CSS com nossas media queries definidas.

<style type="text/css">
body { padding: 15px; background:#eee; font-family: Arial, 
Helvetica, sans-serif }.

.caixa {
	border: solid 1px #666;	
	padding: 5px 10px;
	margin: 40px;
}

.area-visivel span {
	color: #666;
	display: none;
}

/* max-width  */
@media screen and (max-width: 600px) {
	.um {
		background: #F9C;
	}
	span.lt600 {
		display: inline-block;
	}
}

/* min-width */
@media screen and (min-width: 900px) {
	.dois {
		background: #F90;
	}
	span.gt900 {
		display: inline-block;
	}
}

/* min-width & max-width */
@media screen and (min-width: 600px) and (max-width: 900px) {
	.tres {
		background: #9CF;
	}
	span.bt600-900 {
		display: inline-block;
	}
}

/* max device width */
@media screen and (max-device-width: 480px) {
	.iphone {
		background: #ccc;
	}
}
</style>

Agora que já criamos nossa folha de estilos CSS, vamos salvar como estilo.css. Vamos agora criar a página HTML e carregar a nossa folha de estilos que acabamos de criar.

<head>
<title>Media Query</title>

<link rel="stylesheet" href="estilo.css" />
<!—Folha de estilo criada anteriormente carregada -->

</head>

<body>

	<h1>TESTANDO MEDIA QUERIE – RESOLUÇÃO DIFERENTE. </h1>
	<p>Mude o tamanho do seu navegador para ver as mudanças.</p>

	<div class="caixa um">Esta caixa ficará rosa se a área de 
	visão for inferior a 600px</div>

	<div class="caixa dois">Esta caixa ficará laranja se a 
	área de visão for maior que 900px</div>

	<div class="caixa tres">Esta caixa ficará azul se a área 
	de visão estiver entre 600px e 900px</div>

	<div class="wrapper iphone">Esta caixa só será aplicável 
	a dispositivos com max-device-width: 480px (ou seja, iPhone)</div>

	<p class="area-visivel"><strong>Sua área de visão 
	atual é: </strong> <span class="lt600">menor que 
	600px</span> <span class="bt600-900">entre 600 - 
	900px</span> <span class="gt900">maior que 900px</span></p>
        
</body>
</html>

Salvamos esse arquivo HTML como index.html e abrimos com um navegador de nossa preferência para testarmos. O resultado é o seguinte:

Resultado com navegador em tamanho menor.

E para finalizar, o navegador com uma resolução abaixo de 600px.

Vemos que a página, com a simples aplicação de media queries, se comportou de formas diferentes, de acordo com a resolução da tela.

Apresentaremos um conjunto de boas práticas para uma aplicação eficaz de media queries, abordando desde a estratégia mobile-first até a organização do código e uso de unidades flexíveis. Além disso, exploramos como a inteligência artificial pode ser integrada nesse processo, oferecendo desde sugestões automáticas de breakpoints até ferramentas que analisam comportamento do usuário e realizam testes visuais automatizados.

Boas Práticas

Adote o Mobile-First

Comece criando estilos para dispositivos móveis e adicione regras para dispositivos maiores.

• Melhor performance: menos CSS para dispositivos pequenos.
• Melhora a acessibilidade e a usabilidade em dispositivos mais limitados.

/* Estilo base (mobile) */
body {
  font-size: 16px;
}

/* Estilo para telas maiores que 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

Organização por componentes

Evite agrupar todas as media queries no final do CSS. Mantenha-as próximas ao seletor original, isso torna o código mais legível e fácil de manter por parte de equipes diferentes.

.card {
  padding: 10px;
  background: #eee;
}

@media (min-width: 768px) {
  .card {
    padding: 20px;
  }
}

Evite breakpoints desnecessários

Use breakpoints baseados no conteúdo e não em dispositivos específicos.

Exemplo:

• 480px
• 768px
• 1024px
• 1280px

Dica: Ajuste os breakpoints onde seu layout "quebra", testando o design visualmente em navegadores com resize manual.

Combine com Unidades Flexíveis

Media queries são mais eficazes quando combinadas com unidades como:

• em/rem: respeitam tamanho de fonte base e são acessíveis.
• vw/vh: respondem ao tamanho da viewport.
• clamp(): define valores dinâmicos com limites.

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Inclua preferências do usuário

Use media queries avançadas como:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #f0f0f0;
  }
}

Essas práticas melhoram a experiência para usuários com necessidades especiais.

Geração de Media Queries com Inteligência Artificial

Identificação Automática de Breakpoints

Por meio da IA poderemos analisar layouts, detectando assim onde há sobreposição ou problemas visuais, e propõe breakpoints ideais.

Exemplo com IA: Você fornece um design em uma imagem, e a IA propõe:

@media (min-width: 600px) { /* Corrige colapso do menu */ }
@media (min-width: 1024px) { /* Ajusta colunas do grid */ }

Análise de Comportamento do Usuário

IA conectada a ferramentas como Google Analytics pode observar:

• Tipos de dispositivos mais usados.
• Resoluções mais comuns.
• Páginas com maior taxa de abandono em certas telas.

Com isso, pode gerar relatórios e sugestões como:

"Adicione um media query para max-width: 375px — 45% dos usuários usam iPhone SE."

Sugestão e Autocompletar no Editor

GitHub Copilot, TabNine, ou CodeWhisperer sugerem media queries enquanto você digita:

@media (max-width: 768px) {
  /* IA sugere alterar grid para colunas únicas */
}

A utilização de media queries é essencial para garantir uma experiência de usuário consistente, fluida e acessível em qualquer dispositivo. A integração com tecnologias de inteligência artificial eleva esse processo. Ao unir conhecimento técnico com ferramentas automatizadas, desenvolvedores podem entregar interfaces mais eficazes e adaptadas ao comportamento real dos usuários. Dessa forma, dominar media queries é um diferencial importante para profissionais que buscam criar experiências digitais eficientes, acessíveis e futuramente sustentáveis.

Dessa forma terminamos mais um artigo, o qual espero que seja do agrado de todos os leitores. Me coloco à disposição de todos para tirar duvidas e receber sugestões.