Quando criamos sites, é importante que eles sejam responsivos, ou seja, que funcionem bem em diferentes tamanhos de tela. Com o uso de CSS responsivo, você pode definir regras específicas para dispositivos móveis e desktops, garantindo uma experiência otimizada em todos os dispositivos.
Neste tutorial, vamos ver como usar media queries para aplicar estilos diferentes em telas maiores ou menores que 769px. Isso é útil para criar elementos que só aparecem em dispositivos móveis ou desktops.
O que é CSS Responsivo?
O CSS responsivo permite que você crie sites que se ajustam a qualquer tipo de dispositivo: desde smartphones até telas de computadores grandes. Isso é feito com o uso de media queries, que são regras condicionais que verificam o tamanho da tela do dispositivo e aplicam estilos conforme essa condição.
Abaixo estão dois trechos de código CSS amplamente usados para determinar estilos em telas maiores e menores que 769px:
@media only screen and (min-width: 769px) {
/* Neste espaço os CSS vão apenas funcionar em telas maiores que 769px */
.mobonly{
display: none!important;
}
}
@media only screen and (max-width: 769px) {
/* Neste espaço os CSS vão apenas funcionar em telas menores que 769px */
.deskonly{
display: none!important;
}
}
Explicação
@media only screen and (min-width: 769px): Esta regra define que os estilos dentro dela só serão aplicados quando a largura da tela for maior que 769px, ou seja, em telas de desktops ou tablets grandes.
.mobonly { display: none!important; }: O estilo aplicado à classe .mobonly esconde qualquer elemento que esteja com essa classe, garantindo que ele não será exibido em telas grandes.
@media only screen and (max-width: 769px): Esta regra define que os estilos serão aplicados quando a largura da tela for menor ou igual a 769px, ou seja, em dispositivos móveis como smartphones e tablets menores.
.deskonly { display: none!important; }: Aqui, qualquer elemento com a classe .deskonly será ocultado em telas pequenas, fazendo com que esse conteúdo apareça apenas em dispositivos maiores.
Exemplo Prático
Imagine que você tem um site que precisa exibir um banner promocional diferente para usuários de desktop e outro para usuários de mobile. Com o uso dessas media queries, você pode facilmente controlar qual banner será exibido em cada tipo de dispositivo.
<!-- Banner apenas para desktop -->
<div class="deskonly">
<h1>Promoção Exclusiva para Desktop!</h1>
<p>Compre agora e ganhe 10% de desconto!</p>
</div>
<!-- Banner apenas para mobile -->
<div class="mobonly">
<h1>Promoção para Mobile!</h1>
<p>Baixe nosso app e ganhe 15% de desconto!</p>
</div>
No exemplo acima:
- O conteúdo dentro de
.deskonlyaparecerá apenas em telas maiores que 769px. - O conteúdo dentro de
.mobonlyserá exibido apenas em dispositivos móveis com telas menores que 769px.
Dicas Adicionais
- Uso de
!important: Muitas vezes, ao criar CSS responsivo, você precisa sobrescrever estilos já definidos. Usar!importantassegura que as regras específicas para desktop ou mobile tenham prioridade. - Organização do Código: Tente organizar seus estilos usando media queries separadamente para manter seu código limpo e legível.
Conclusão
O uso de media queries é uma maneira simples e eficaz de criar sites responsivos que se adaptam a qualquer dispositivo. Com essas técnicas, você pode personalizar a experiência de usuários em desktops, tablets e smartphones de maneira eficaz e elegante.
