Como criar layouts responsivos com media queries, adaptando o estilo para diferentes tamanhos de tela
Media queries permitem aplicar estilos CSS condicionalmente, dependendo das características do dispositivo, principalmente o tamanho da tela.
Com elas, você cria layouts que se adaptam a celulares, tablets e desktops com o mesmo arquivo CSS.
Carregando...Tudo dentro do bloco @media só tem efeito quando a condição é verdadeira.
max-width: os estilos valem até aquela largura. Útil para ajustar o layout em telas menores.
Carregando...min-width: os estilos valem a partir daquela largura. Útil para adicionar estilos progressivamente.
Carregando...A abordagem mobile first consiste em escrever os estilos base para celular e usar min-width para adicionar estilos conforme a tela cresce. É a forma mais recomendada hoje.
Carregando...Não existe uma lista oficial, mas os breakpoints mais usados no mercado são:
Carregando...Além do tamanho, media queries aceitam outras condições.
Carregando...prefers-color-scheme é muito usada para implementar suporte automático ao modo escuro.