Media
o @media de 375px não conta, só desktop ta alterando
Media
o @media de 375px não conta, só desktop ta alterando
Olá, João Paulo!
Obrigado por compatilhar sua questão conosco.
O fato de a instrutora ter escrito @media(max-width: 375px) sem espaço e ter funcionado para ela não significa que está errado — alguns navegadores aceitam essa sintaxe. Porém, o principal problema aqui não é a sintaxe, mas sim o breakpoint escolhido.
375px é muito específico e pode não estar sendo aplicado por alguns motivos:
Vamos realizar alguns testes:
@media (max-width: 375px) {
body {
background-color: red !important;
}
}
Depois, redimensione a janela do navegador para menos de 375px. Se o fundo ficar vermelho, significa que o media query funciona, mas talvez os estilos específicos que você colocou dentro dele não estejam com força suficiente.
@media (max-width: 768px) {
/* seus estilos mobile aqui */
}
Ou, se quiser focar apenas em celulares menores:
@media (max-width: 480px) {
/* seus estilos mobile aqui */
}
Verifique o zoom do navegador
O zoom do navegador afeta os media queries. Se estiver em 110%, 125% ou 150%, o navegador considera isso no cálculo da largura. Pressione Ctrl + 0 para resetar o zoom para 100%.
Use o DevTools corretamente
Apenas redimensionar a janela não é a melhor forma de testar. Siga estes passos:
<head>:<meta name="viewport" content="width=device-width, initial-scale=1.0">
Sem ela, os media queries não funcionam corretamente em dispositivos móveis reais.
Faça esses testes e me conta o resultado. Se ainda não funcionar, compartilhe mais informações conosco a respeito!
Abraços e bons estudos! ✨