Responsividade

Oi, Vinicius! Como vai?

Quando falamos sobre responsividade, o uso de porcentagens pode ser uma boa escolha, principalmente quando você quer que os elementos se ajustem proporcionalmente ao tamanho da tela. No entanto, não é a única abordagem e nem sempre é a melhor. O ideal é combinar unidades relativas, como %, vw (viewport width) e vh (viewport height), com unidades fixas em situações específicas.

Por exemplo, para um layout fluido, o uso de porcentagem funciona bem:

.container {
  width: 100%;
  height: 50vh;
  background-color: lightblue;
}

Esse código faz a div ocupar toda a largura da tela e metade da altura, se ajustando automaticamente ao tamanho da janela.

Mas, em alguns casos, o rem (relativo ao tamanho da fonte base) ou o em (relativo ao elemento pai) podem ser mais indicados, especialmente para tamanhos de fonte e espaçamentos:

.texto {
  font-size: 2rem; /* O dobro do tamanho da fonte padrão */
  padding: 1em; /* Espaçamento baseado no tamanho da fonte do próprio elemento */
}

Além disso, para designs mais responsivos, o uso de media queries é fundamental:

@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

@media (min-width: 769px) {
  .container {
    width: 50%;
  }
}

Assim, o layout se adapta conforme o tamanho da tela, oferecendo uma melhor experiência em diferentes dispositivos.

Portanto, o melhor caminho é testar e combinar essas unidades conforme o objetivo do seu site e o comportamento esperado nos diversos tamanhos de tela.

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!