CSS - 3. Unidades de medida

O CSS possui vários tipos de medidas de tamanho além do famoso "px" para tamanhos de fontes, textos, margens, e etc.

Para definir uma unidade de medida, sempre tem que utilizar o número, seguido do seu sufixo da unidade de medida para ser interpretado corretamente.

Unidades de medida fixa

cm = centímetros
mm = milímetros
in = polegadas (1in = 96px = 2,54cm)
px = pixels (1px = 1/96 polegadas)
pt = pontos (1pt = 1/72 polegadas)
pc = picas (1pc = 12pt)

* Pixels (px) em alguns dispositivos, como no Android, passaram a expressar valores que podem ser diferentes. Dispositivos com baixa densidade de pixels, como 72 dpi, cada px representa fisicamente um pixel da tela, mas para densidades de telas maiores, como as de 400 dpi ou 600 dpi, um pixel pode ser representado por vários pontos físicos. O Android passou a adotar uma medida referencial para auxiliar a visibilidade de telas de alta densidade e alta resolução, assim como também versões recentes dos sistemas operacionais.

Unidades de medida relativa

A unidade de medida relativa é baseada em não definir um tamanho exato para o elemento em si, mas usar como base um tamanho com base ao padrão da página ou de sua referência pai anterior.

Por exemplo, seu código HTML supondo que utilize 13px para tamanho de fonte por padrão. Ao utilizar um valor referencial, você passa a dizer quanto deve ser maior ou menor com base a referência anterior. Se nada no código HTML tiver uma referência fixa, usará sempre a superior.

em = Relativo ao tamanho font-size do elemento. 1em é o tamaho igual, 0.5em é metade do tamanho, e 2em significa duas vezes o tamanho da fonte.

ex = Relativo a altura da fonte. 2.3ex corresponde a cópia da medida.

ch = Relativo ao tamanho da largura do caractere "0" da fonte referencial. Ou seja, irá pegar o tamanho da largura da referência, e usar como tamanho da fonte. Caso o caractere "0" da fonte usada seja mais largo, a fonte indicada com a unidade ch ficará consequentemente maior. Se utiliza fontes tipo "Wingdings", que são fontes baseadas em ícones, todos são quadrados contendo o mesmo tamanho de altura e largura, então o tamanho da fonte será igual, mas em todas as fontes de texto, geralmente os caracteres de largura já são menores que a sua própria altura.

rem = Relativo com o font-size do elemento raiz do site, ignorando seus elementos de referência. Neste caso, se o documento possui 16px e alguma div possui outros tamanhos, e alguma fonte possui a medida com rem, irá usar com base nos 16px e não usará de acordo com a referência anterior.

vw = Relativo a 1% da largura da viewport.

vh = Relativo a 1% da altura da viewport.

vmin = Relativo a 1% do menor dimensão da viewport.

vmax = Relativo a 1% da maior dimensão da viewport.

% = Relativo ao elemento pai.

viewport = Área onde o navegador faz a renderização do HTML, área visível.