1
resposta

Layout responsivo

Para celulares com 480px, fica perfeito a alteração no CSS, mas quando uso layout responsivo do F12, na hora da transição, buga tudo. Eu resolvi isso deixando o @media screen and max width em 1000px, parece que a transação fica mais suave e para telas menores que 1240(1000 neste caso né) ele iria usar o display mobile, isso é uma pratica comum? Ou essa transição precisa ser resolvida de outro jeito?

1 resposta

Olá, Pedro.

Tudo bem?

Desculpa a demora.

Verdade mesmo! Quando estica no modo responsivo e a tela passa a ser maior que 480px , parte do layout fica cortado e precisa ser ajustado mesmo! Mas mesmo assim eu acho muito alto e arriscado colocar @media screen and max width em 1000px nesse caso deu certo porque se reparar nos elementos, não mudou muito algumas medidas como o banner por exemplo que sempre vai ter o width: 100%; e os textos com tamanhos estáticos. Seria mais seguro utilizar um intevalo de tamanho entre uma resolução de tela e outra:

Fazer como se fosse o mobeli primeiro:

@media screen and (max-width: 480px) {
   //ESTILO AQUI
}

Depois mais em baixo no arquivo css, como se fosse para tablet:

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
   //ESTILO AQUI
}

Seria interessante para definir melhor o posicionamento dos elementos e os tamanhos, para melhor precisão em diferentes dispositivos sabe?

Espero ter ajudado, mas qualquer dúvida manda no fórum de novo. Valeu Pedro!