Media Queries e Flexbox
As Media Queries são uma parte essencial do design responsivo.
Elas permitem que você aplique regras CSS específicas com base nas características do dispositivo, como largura de tela, altura, orientação e muito mais.
Quando combinadas com Flexbox, você pode criar layouts que se ajustam perfeitamente a diferentes tamanhos de tela.
Para começar, você pode definir uma Media Query que será acionada quando a largura da tela atingir um determinado valor.
Por exemplo, para aplicar um layout diferente em telas pequenas, você pode usar:
/* Media Query para telas pequenas (exemplo de largura máxima de 600px) */
@media (max-width: 600px) {
/* Aqui, você pode aplicar regras CSS específicas para telas pequenas */
}
Dentro dessa Media Query, você pode usar Flexbox para reorganizar elementos ou ajustar o comportamento do layout de acordo com as necessidades de telas menores.
Exemplo prático de reorganização de elementos com Flexbox em uma Media Query:
/* CSS para telas pequenas */
@media (max-width: 600px) {
.container {
flex-direction: column; /* Altera a direção para uma coluna */
}
}
Neste exemplo, quando a largura da tela for igual ou menor a 600px, os elementos dentro da classe .container serão dispostos em uma coluna em vez de uma linha, tornando o layout mais apropriado para telas pequenas.
Além disso, você pode usar Flexbox para reorganizar elementos dentro da Media Query, alterar a ordem dos itens ou ajustar o espaçamento entre eles.
A flexibilidade do Flexbox se torna especialmente valiosa ao criar layouts responsivos que se adaptam harmoniosamente a dispositivos de diferentes tamanhos.
Compreender como usar Media Queries em conjunto com Flexbox é fundamental para criar sites responsivos e amigáveis para qualquer dispositivo.
Ao longo deste módulo, forneceremos exemplos práticos de código para ilustrar como aplicar essas técnicas de forma eficaz.
