2

Unidades de Medida com distância relativa

#CSS
Caroline Moran
Caroline Moran

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

1
29

Comentários (1)

0
Nayanne Batista

Nayanne Batista

16/02/2021 21:11

Oi Caroline, já tinha visto essa medida e confesso que também não sabia o que significava (até agora! haha).

Muito obrigada por compartilhar!

Eu posso não ser a melhor do mundo, mas posso ser melhor do que eu fui ontem.

Brasil