Media query é uma das principais técnicas para deixar o site responsivo em telas com diferentes tamanhos e resoluções.
Com o aumento do uso de dispositivos móveis para acessar à internet, é fundamental que as páginas da web ofereçam uma experiência de usuário satisfatória em todas as plataformas.
E então foi aí que surgiu o conceito de site responsivo, que busca adaptar o layout e o conteúdo para diferentes dispositivos e tamanhos de tela.
Embora, geralmente, o design responsivo seja implementado por meio de frameworks e bibliotecas, o media query, uma regra CSS aplicada em HTML, permite que você defina estilos de acordo com os diferentes dispositivos e tamanhos de tela.
Como usar o media query para deixar um site responsivo?
O media query pode adaptar o layout para diferentes tamanhos de tela, mas também pode ocultar ou exibir conteúdo com base na área disponível no display do usuário. Além disso, a ferramenta também oferece a possibilidade de definir estilos diferentes para telas de alta resolução ou telas com suporte a cores limitado.
O recurso permite criar um site responsivo que personaliza a experiência do usuário com base no dispositivo que está sendo usado, oferecendo opções específicas para dispositivos móveis, como por exemplo menus de navegação simplificados ou opções de zoom.
Confira em seguida quais são os passos importantes para usar o media query com eficiência.
+Tipos de Hospedagem de Sites: qual a melhor para o seu projeto?
1. Defina pontos de interrupção
Antes de tudo, para usar o media query é preciso definir pontos de interrupção nos quais o layout e os estilos do site devem mudar.
Por exemplo, um ponto de interrupção pode ser definido para telas de smartphones, outro para telas de tablets e um terceiro para telas de desktop.
2. Escreva as regras CSS para cada ponto de interrupção
Após definir os pontos de interrupção, então é necessário escrever as regras CSS para cada ponto.
Por exemplo, para telas de smartphones, as fontes devem ser maiores, os botões maiores e mais espaçados e as imagens devem ser dimensionadas para caber na tela.
Já para as telas de desktop, deve ser feito de forma que a navegação seja mais complexa e que haja mais espaço para conteúdo.
3. Verifique como as regras se aplicam em diferentes dispositivos
Com as regras CSS definidas, é importante verificar como elas se aplicam em diferentes dispositivos.
Para verificar, basta abrir o site em vários dispositivos, ou também pode ser feito através de um emulador.
4. Ajuste as regras conforme necessário
Se as regras não estão funcionando corretamente em alguns dispositivos, então podem ser realizados ajustes, como adicionar uma regra específica para um dispositivo que está se comportando de forma diferente dos outros.
Leia também:
- Como criar um site de vendas?
- Linguagens de programação web que você deve ficar de olho
- O que é framework e quando utilizar?
Principais comandos de media query
Existem inúmeros comandos de media queryque você pode escolher, mas a chave é entender as características do seu público-alvo, definir conjuntos de estilos que se adaptem a diferentes dispositivos, para então oferecer uma experiência de usuário otimizada e consistente.
Confira em seguida os principais exemplos.
1. @media screen
O comando é usado para definir que as regras de estilo dentro do media query serão aplicadas apenas em telas, ou seja, em dispositivos como desktops, laptops, tablets e smartphones. Por exemplo:
@media screen {
/* regras de estilo*/
}
2. @media (min-width: valor) e @media (max-width: valor)
Esses comandos servem para determinar a largura mínima e máxima da tela em que as regras de estilo dentro do media query serão aplicadas. Para aplicar uma regra de estilo apenas em telas com largura maior que 768 pixels, podemos usar:
@media (min-width: 768px) {
/* regras de estilo*/
}
E para aplicar uma regra de estilo apenas em telas com largura menor que 768 pixels, podemos usar:
@media (max-width: 767px) {
/* regras de estilo*/
}
3. @media (orientation: portrait) e @media (orientation: landscape)
Os dois comandos definem a orientação da tela em que as regras de estilo do media query serão aplicadas. Por exemplo, para aplicar uma regra de estilo apenas em telas com orientação retrato, podemos usar:
@media (orientation: portrait) {
/* regras de estilo*/
}
Para aplicar uma regra de estilo apenas em telas com orientação paisagem, podemos usar:
@media (orientation: landscape) {
/* regras de estilo*/
}
4. @media (min-resolution: valor) e @media (max-resolution: valor)
Esses comandos são usados para definir a resolução mínima e máxima da tela em que as regras de estilo serão aplicadas. Por exemplo, para aplicar uma regra de estilo apenas em telas com resolução maior que 300dpi, podemos usar:
@media (min-resolution: 300dpi) {
/* regras de estilo*/
}
Para aplicar uma regra de estilo apenas em telas com resolução menor que 72dpi, podemos usar:
@media (max-resolution: 72dpi) {
/* regras de estilo*/
}
5. @media (hover: hover)
O comando é usado para definir que as regras de estilo dentro do media query serão aplicadas apenas em dispositivos que têm capacidade de hover, como os computadores com mouse. Um exemplo de uso é:
@media (hover: hover) {
/* regras de estilo*/
}
6. @media (pointer: coarse) e @media (pointer: fine)
Os @media (pointer: coarse) e @media (pointer: fine) são comandos que permitem definir estilos específicos para dispositivos com diferentes tipos de ponteiro (ou cursor).
O comando @media (pointer: coarse) serve para dispositivos com ponteiros imprecisos, como telas sensíveis ao toque, trackpads ou touchpads, pois nesse tipo de dispositivo, os usuários usam seus dedos para interagir com a interface.
Para esses casos, podemos definir estilos que tornem os elementos da interface maiores e mais espaçados, para facilitar a interação com os dedos. Por exemplo:
@media (pointer: coarse) {
.botao {
font-size: 24px;
padding: 12px;
}
}
O comando @media (pointer: fine) serve para dispositivos com ponteiros precisos, como mouses ou trackballs. Nesse tipo de dispositivo, usuários costumam ter mais precisão ao interagir com a interface.
Para esses casos, podemos definir estilos mais detalhados e com mais elementos na tela, sem se preocupar tanto com a facilidade de interação, por exemplo:
@media (pointer: fine) {
.botao {
font-size: 18px;
padding: 8px;
}
}
Media queries desempenham um papel fundamental na criação de sites responsivos, adaptando-se a diferentes dispositivos e tamanhos de tela. Ao utilizar media queries em seu projeto, você garante uma experiência de usuário otimizada e consistente em várias plataformas.
Com um bom entendimento e a aplicação correta dessas técnicas, você estará bem preparado para criar sites que ofereçam uma experiência de usuário excepcional, independentemente do dispositivo utilizado para acessá-los.
Lembre-se de definir pontos de interrupção adequados, escrever regras CSS específicas e testar seu site em diferentes dispositivos para garantir que ele funcione conforme o esperado.
Conte com o melhor provedor de Hospedagem de Sites da Locaweb para colocar seu projeto no ar. Além de ter Registro de Domínio e SSL incluso em todos os planos, ainda possui Backup diário, Acesso via SSH e suporte 24×7.
Conheça a Hospedagem de Sites da Locaweb e comece agora o seu projeto na internet!
Saiba mais
