Mini-manual das Unidades de Medida mais Utilizadas em CSS

Em um mundo repleto de de px, rem e vh, qual devo escolher?

Published in

orangejuicetech

3 min readDec 29, 2023

Um professor de Matemática costuma desconsiderar uma resposta por falta de ou pelo uso errôneo de uma unidade de medida. Os cálculos podem ser plausíveis, acompanhados de uma lógica impecável, mas um resultado em metros apresenta uma noção de tamanho desproporcional se a verdadeira resposta for em centímetros. Infelizmente, a mesma lógica do professor estrito é aplicável à tarefa de estilizar uma página web. Por isso, é importante saber o quê cada unidade de medida significa e quais são suas aplicações.

Contudo, assim como algumas unidades são favorecidas na vida cotidiana devido à sua praticidade e frequência, também acontece com o mundo Frontend que algumas unidades de medida serão mais comuns em códigos-fonte do que outras. É sob essa perspectiva que este artigo é redigido: quais são as unidades de medida absolutamente necessárias no kit iniciante de um desenvolvedor?

Tipos de unidade de medida

Existem dois tipos de unidade de medida em CSS: as medidas absolutas e as medidas relativas.

Medidas absolutas: são aquelas que se comportam da mesma maneira, independente do tamanho da tela ou de suas “caixas”. Em outras palavras, elementos dependentes delas se comportam da mesma maneira através de toda e qualquer tela que acesse a aplicação. Caso precisem modificar seu comportamento, costuma-se utilizar media queries.
Medidas relativas: são aquelas cujo comportamento variará de acordo com o tamanho da tela ou de suas “caixas”. Em outras palavras, elementos dependentes delas apresentam responsividade automática e falta de padrão. Isso torna, por exemplo, 2em um tamanho para elemento x e outro para elemento y.

Quais são as medidas mais comuns e como elas são utilizadas?

Medidas absolutas

Pixel (px)
Uma das unidades de medida mais usadas quando uma página necessita de medidas absolutas. É uma das unidades mais comuns em Web Design, e pode ser usada para praticamente qualquer coisa. Por isso, acaba sendo uma das primeiras unidades a serem aprendidas e utilizadas.

Podemos definir um pixel como um pontinho luminoso em uma tela, o que significa que ele funciona como um “átomo” da web. Um pixel em CSS equivale a 0.26mm, o que o torna maior do que um pixel real.

Medidas relativas

Em
Essa medida é um pouco mais complicada de explicar. Tomemos um exemplo:

Nesse caso, Filho, por ter sido estilizado com em, herdará suas características de Pai. Como foi especificado que Filho será estilizado com 1em, significa que o site imprimirá CSS com 15px.

Modifiquemos nosso exemplo:

Agora, Filho foi estilizado com o dobro de em, mas Pai permaneceu o mesmo. Isso significa que o site imprimirá CSS com 30px.

Em outras palavras, em é uma unidade de medida relativa que depende do comportamento de seu elemento pai.

Adicionemos mais um exemplo:

Nesse caso, Filho terá o tamanho de 30px e Neto, 60px. Assim, conclui-se que a regra segue a mesma até para divs aninhadas.

Fun fact: o nome em vem a letra m, que é a que ocupa a maior largura em todo o alfabeto. Ela é utilizada como ponto de referência para a unidade de medida.

Rem
Não, não tem nada a ver com o ciclo do sono ou com Everybody Hurts. Rem é uma unidade de medida que visa facilitar o que aconteceria se diversas divisões dependessem de em para funcionarem, pois permite que seus elementos ajam de maneira independente de seus ancestrais. Ela atinge esse efeito por se referir ao em da raiz (root em = rem), em geral a própria <html> (cujo padrão costuma ser 16px). Isso significa que pouco importam as mudanças nos elementos pais, os filhos permanecerão com o mesmo valor e comportamento, tudo isso enquanto seguem responsivos.

Existem outras unidades de medida no CSS?

Sim! Existem diversas unidades de medida que são mais obscuras, como o pior inimigo dos Estados Unidos, centimeters, mas elas não são tão comuns quanto as que foram citadas neste artigo. Para saber quantas unidades de medida são reconhecidas por um código CSS, recomendo esta página da W3Schools, que além de explicar o que cada unidade representa, mostra seu comportamento através de códigos escritos justamente para demonstrações práticas.

Apesar de não serem tão amplamente utilizados quanto essas três unidades que mencionei no decorrer do texto, recomendo aprender sobre viewport units.