Não entendo muito bem qual o critério para usar em, px ou vw como unidade de tamanho para estilização do .css, se tudo no Figma está em px.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Não entendo muito bem qual o critério para usar em, px ou vw como unidade de tamanho para estilização do .css, se tudo no Figma está em px.
Oi Artur!
Entendo sua dúvida, e é algo que muitos desenvolvedores enfrentam ao trabalhar com CSS. Vamos lá:
width: 200px;em se ajustarão proporcionalmente.1em será igual a 16px. Então, width: 2em; será igual a 32px.1vw é igual a 1% da largura da viewport.width: 50vw; significa que o elemento terá 50% da largura da viewport.px para manter a precisão. No entanto, para tornar seu layout responsivo, é interessante converter algumas dessas unidades para em ou vw.em e vw são mais adequados. em é ótimo para tamanhos de texto e espaçamentos que devem escalar com o tamanho da fonte. vw é excelente para larguras e alturas de elementos que devem se ajustar ao tamanho da tela.Se você tem um botão no Figma com largura de 200px e deseja que ele seja responsivo:
/* Usando px */
button {
width: 200px;
}
/* Usando vw para responsividade */
button {
width: 20vw; /* Aproximadamente 20% da largura da viewport */
}
/* Usando em para responsividade relativa ao tamanho da fonte */
button {
width: 12.5em; /* Se o tamanho da fonte for 16px, 12.5em será 200px */
}
Espero ter ajudado e bons estudos!