Oi, Jannine. Espero que você esteja bem.
Muito obrigada por compartilhar sua situação conosco e pela confiança em comentar aqui. 🫂
É normal se sentir um pouco perdida quando estamos aprendendo algo novo, especialmente quando se trata de conceitos de programação como a responsividade em HTML e CSS.
Vou tentar te ajudar com um exemplo prático usando os conceitos que você aprendeu na aula, tá bem?
Vamos supor que você tem um elemento em sua página, como uma imagem. Normalmente, você poderia definir a largura e a altura desta imagem em pixels. No entanto, se você quiser que sua página seja responsiva, você precisará adaptar este elemento para diferentes tamanhos de tela.
Aqui é onde as unidades de medida relativas entram. Em vez de definir a largura e a altura em pixels, você pode definir em porcentagem. Por exemplo:
<img src="minha-imagem.jpg" style="width:100%; height:auto;">
Neste caso, a imagem sempre ocupará 100% da largura do elemento pai, e a altura será ajustada automaticamente para manter a proporção da imagem. Isso fará com que a imagem se adapte a diferentes tamanhos de tela, já que não há valores fixos (em pixels).
E a ferramenta DevTools do seu navegador pode ser muito útil para visualizar como seu projeto aparece em diferentes tamanhos de tela. Você pode abrir o DevTools com o botão direito do mouse e selecionando a opção Inspecionar.
Espero que o exemplo te ajude a entender melhor os conceitos apresentados na aula.
Se outra dúvida surgir, estamos à vontade. Obrigada pelo voto de confiança novamente.
Abraços!