Nessa aula vamos aprender sobre as unidades de medidas relativas e absolutas, e com isso dominar o assunto unidades de medidas no CSS.

Pela nossa caminhada nesse curso já entendemos que com CSS é possível modificarmos toda a aparência de nossa página HTML como por exemplo modificar tamanho de fontes, altura e largura de elementos, etc.

Quando a gente pensa em modificações nas dimensões dos elementos começamos a nos preocupar com as unidades de medidas, afinal quando alteramos a altura de uma div precisamos informar o valor da altura em alguma unidade de medida.

No CSS temos as unidades de medidas relativas e absolutas.

Relativas x absolutas

Imagine o seguinte cenário abaixo:

Temos um elemento pai representado pelo id “container” e o elemento filho pelo id “content”. Se usarmos no elemento filho uma largura com unidade de medida relativa, a largura dele dependerá diretamente da largura do elemento pai.

Se colocarmos por exemplo uma largura de 50% no elemento filho (content) ele vai ter de fato 50% da largura de seu pai, se o elemento pai tiver 1000px o elemento filho terá 500px de largura, se o elemento pai tiver 600px o filho terá 300px de largura.

Pelo contexto acima já entendemos então que o “%” é uma unidade de medida relativa e o pixel (px) é uma unidade de medida absoluta.

Quando usamos o pixel para determinar a dimensão de um elemento, o navegador leva em consideração a largura da tela do usuário. Se o usuário está usando uma tela com 1366px de largura, todas as medidas em pixel usadas devem ser proporcionais a essa largura da tela.

Se o elemento “container” que usamos anteriormente tiver 800px de largura, o navegador vai usar proporção para saber quanto 800px vai ocupar numa tela de 1366px.

Você pode está se perguntando: “O pixel então é relativo?” Não! O pixel é relativo apenas a medida da tela, mas não é relativo ao elemento pai.

Já o percentual é totalmente relativo as medidas do seu elemento pai. Quando usamos por exemplo largura com percentual, o navegador automaticamente vai buscar a medida do elemento pai e baseado nisso vai saber quanto o elemento filho deve ocupar.

Unidade de medida “em”

Além do percentual temos uma outra unidade de medida relativa chamada “em”. Veja como funciona:

Imagine que temos por exemplo um titulo “h2” dentro de uma div:

Se o elemento pai “container” tiver tamanho de fonte 20px, podemos por exemplo dizer que o elemento filho “h2” deve ter o dobro do tamanho de texto de seu pai (20 x 2 = 40px).

Para isso usamos a unidade “em”. Ela funciona como um fator de multiplicação. Quando usamos por exemplo “font-size: 2em” estamos dizendo que esse elemento terá 2x o tamanho de fonte de seu elemento pai.

Como resultado disso teremos:

texto qualquer com 20px

titulo com 2em

Perceba que o texto de “h2” tem o dobro do tamanho do texto fora do “h2” justamente pelo “2em” que pegou o valor de font-size do elemento pai e duplicou para o h2.