Já vi algumas pessoas utilizando uma tag no css chamada "@media" na qual o pessoal utilizava para trabalhar com a responsividade da página, eles estabeleciam uma condição e se essa condição fosse atingida a página mudava. A minha dúvida é, existe diversas formas para deixar uma página flexível? Se sim, a tag "@media" é uma boa opção?
hoje, com a Alura e o Google Gemini
Oi, Natan, tudo bem?
Exatamente como você comentou em sua postagem, as media queries (@media) são ferramentas muito poderosa para tornar as páginas da web responsivas e são uma excelente opção. Elas permitem aplicar estilos CSS específicos com base em características do dispositivo do usuário, como a largura da janela de visualização.
Aqui está um exemplo básico de como você pode usar uma media query para alterar a cor de fundo de um elemento quando a largura da janela de visualização é menor que 600 pixels:
body {
background-color: lightblue;
}
@media (max-width: 600px) {
body {
background-color: lavender;
}
}
No exemplo acima, o fundo da página será lightblue quando a largura da janela de visualização for maior que 600 pixels. Contudo, quando a largura da janela de visualização é menor que 600 pixels, a cor do fundo muda para lavender.
Existem, de fato, várias maneiras de fazer uma página flexível e responsiva. Além de usar as media queries, podemos usar unidades relativas (como porcentagens em vez de pixels) e Flexbox e Grid CSS para criar layouts que se adaptam a diferentes tamanhos de tela.
Caso você queira ler mais sobre as media queries, recomendo a leitura da documentação abaixo que detalha mais informações:
Se estiver interessando em conhecer mais sobre as unidades relativas e a diferença delas para unidades absolutas, recomendo o artigo abaixo que aborda com mais detalhes todos os tipos de medidas que podemos usar:
Espero ter ajudado. Caso tenha dúvidas, não hesite em postar no fórum!
Abraços!