Unidades de Medida com distância relativa

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