Olá, Andre!
Pelo que entendi, você quer que o seu site se comporte com responsividade, onde os elementos da página diminuem proporcionalmente ao redimensionar a janela do navegador, certo?
Essa técnica é conhecida como design fluido, onde as dimensões dos elementos são definidas em percentuais em relação à janela do navegador, e não em pixels fixos.
Vou te dar um exemplo prático. Digamos que você tenha um elemento com largura de 300px em uma tela de 1200px de largura. Isso corresponde a 25% da largura da tela. Então, ao invés de definir a largura desse elemento como 300px, você pode definir como 25%. Assim, quando a janela do navegador for redimensionada, a largura do seu elemento vai se ajustar proporcionalmente.
No seu CSS, você pode fazer algo assim:
.elemento {
width: 25%;
}
Lembre-se de aplicar essa técnica a todos os elementos que você deseja que sejam redimensionados. E não esqueça de testar bem em diferentes resoluções para garantir que tudo esteja funcionando como esperado.
No entanto, essa técnica pode não ser suficiente para todos os casos, especialmente se você quiser que o layout do seu site mude completamente em diferentes resoluções (por exemplo, exibir um menu hamburger em vez de um menu horizontal em telas pequenas). Nesse caso, você pode precisar usar media queries para aplicar estilos diferentes dependendo da resolução da tela.
Media queries permitem que você ajuste o layout de uma página da web com base nas características do dispositivo em que ela é exibida. São como instruções que você dá ao navegador para adaptar a aparência do site conforme a tela do dispositivo.
Suponha que você tenha um site simples com um título e uma imagem. Quando alguém acessa seu site em um computador desktop, você deseja que o título fique à esquerda da imagem. Mas quando alguém visualiza o site em um smartphone, você quer que o título fique acima da imagem.
Você pode usar media queries para fazer isso. Veja como:
/* Estilos para dispositivos de tela grande, como desktops */
@media screen and (min-width: 768px) {
.titulo {
float: left;
}
.imagem {
float: right;
}
}
/* Estilos para dispositivos de tela pequena, como smartphones */
@media screen and (max-width: 767px) {
.titulo {
text-align: center;
}
.imagem {
text-align: center;
}
}
Neste exemplo, estamos usando duas media queries. A primeira, com min-width: 768px, se aplica a dispositivos com largura de tela igual ou superior a 768 pixels (como desktops). Ela faz com que o título e a imagem flutuem para a esquerda e direita, respectivamente.
A segunda media query, com max-width: 767px, se aplica a dispositivos com largura de tela igual ou inferior a 767 pixels (como smartphones). Ela centraliza o título e a imagem.
Assim, com media queries, você pode criar layouts flexíveis que se ajustam automaticamente ao tamanho da tela do dispositivo, melhorando a experiência da pessoa usuária em uma variedade de dispositivos e tamanhos de tela.
Recomendo que leia a Documentação oficial do MDN sobre uso de media queries para entender mais sobre essa ferramenta e assista ao vídeo Como deixar o Layout Responsivo no seu site, que exemplifica o uso de media queries na prática e pode te ajudar bastante.
Parabéns pela dedicação em praticar clonando uma página e adicionando novas funcionalidades, você está no caminho certo!
Espero muito que tenha te ajudado. Se tiver mais alguma dúvida, me coloco à disposição!
Um abraço e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
)
