Solucionado
Estou com algumas dúvidas ao tornar o site responsivo. Ao colocar o @media (max-width: 1200px), ficou funcional. Mas se continua a diminuir o tamanho da tela, já não consigo alterar por exemplo os links da página home. Vejo que tenho colocado bastante alterações ao criar '@medias'. Como posso fazer para simplificar? Meu repositório no github é https://github.com/enzo-rafael-souza/portfolio Se alguém puder ajudar, super agradeço.
Olá Enzo, tudo bem?
O desenvolvimento de um site responsivo pode ser um pouco desafiador e requer planejamento cuidadoso para garantir que o layout e os elementos se ajustem adequadamente a diferentes tamanhos de tela. Para simplificar o processo e evitar a necessidade de muitos @media queries, você pode seguir algumas práticas recomendadas:
Usar um grid system: uma grade é uma maneira de organizar elementos em uma página em colunas e linhas, permitindo que eles se ajustem automaticamente ao tamanho da tela. Existem muitas bibliotecas de grade disponíveis, como Bootstrap ou Foundation, que podem facilitar muito o processo de design responsivo.
Usar unidades relativas: unidades como porcentagem, em e rem são escalonáveis e podem ajudar a manter o layout consistente em diferentes tamanhos de tela.
Limitar o uso de valores absolutos: evitar o uso de valores absolutos, como pixels, para dimensionar elementos pode tornar o design mais flexível e adaptável a diferentes dispositivos.
Priorizar o conteúdo: certifique-se de que o conteúdo mais importante esteja visível e acessível, mesmo em telas menores. Considere ocultar elementos menos importantes em telas menores ou reorganizar o layout para que o conteúdo principal apareça primeiro.
Testar em vários dispositivos: teste seu site em vários dispositivos e tamanhos de tela para garantir que o design seja responsivo e se adapte adequadamente a diferentes resoluções.
Quanto ao seu repositório GitHub, parece que você já está usando alguns @media queries para ajustar o layout em diferentes tamanhos de tela. Uma opção seria tentar simplificar o layout geral do site, limitando o número de elementos que precisam ser ajustados em tamanhos de tela menores. Além disso, você pode tentar usar um grid system para ajudar a organizar os elementos em colunas e linhas, o que pode tornar o design mais fácil de ajustar em diferentes tamanhos de tela.
Espero que essas dicas ajudem! Um abraço e bons estudos!