Geralmente em meus códigos uso muito a unidade de medida pixel ("px"), e sempre ao olhar no dev tools do navegador de algumas paginas da web via as unidades de medida em "rem", nunca soube o que era, até agora.
As unidades de medida com distância relativa são relativas a algum outro valor, pode ser o elemento pai, ou o "html", ou o tamanho da tela. Seu grande benefício é a melhor adaptação aos diferentes tipos de tela.
São elas:
- A unidade "em" que é relativa ao pai.
exemplo: o tamanho da "font", se o pai tem font-size: 16px e o filho tiver font-size: 0.5em, significa que a fonte do filho é metade do valor da fonte do pai, ou seja 8px.
- A unidade "rem" que é relativa ao html (elemento raiz).
exemplo: se o elemento raiz tem font-size: 16px (padrão) e definirmos um elemento, dentro do html, com font-size: 2rem, o elemento terá 2 vezes o tamanho da font do html, ou seja 32px.
- A unidade "vw" que é relativa a largura da viewport(tela que vemos). Significa que dividimos a largura da viewport em 100 pedaços, cada pedaço é 1vw. Se a largura da viewport diminui, automaticamente a largura do elemento definido com a unidade de medida "vw" também diminui.
- A unidade "vh" que é relativa a altura da viewport. Significa que dividimos a altura da viewport em 100 pedaços, cada pedaço é 1vh. Se a altura da viewport diminui, automaticamente a largura do elemento definido com a unidade de medida "vh" também diminui.
- A unidade "%" também entra, sendo que ela vai ser relativa ao pai.
Informações aprendidas em uma aula da Rocketseat
Nayanne Batista
16/02/2021 21:11