1. Unidades Absolutas

Unidades absolutas possuem um tamanho fixo e nao dependem de nenhum contexto externo. A mais comum e o px (pixel), que equivale a um ponto de dispositivo logico na tela. No CSS, 1in = 96px = 72pt = 2.54cm = 25.4mm — todas as demais unidades fisicas sao definidas em relacao ao pixel.

Apesar de serem previssiveis, unidades absolutas nao escalam automaticamente com preferencias do usuario ou diferentes densidades de tela. Use-as para elementos que precisam de tamanho fixo, como bordas (border: 1px), sombras e espacamentos minimos.

2. Unidades Relativas

Unidades relativas se adaptam ao contexto em que sao usadas, tornando os layouts mais flexiveis e responsivos. As principais sao:

• rem (Root em): Relativo ao font-size do elemento raiz (html). Com a configuracao padrao de 16px, 1rem = 16px, 0.875rem = 14px. Alterar o font-size do html escala toda a tipografia do site.
• em: Relativo ao font-size do elemento pai. Pode causar efeito cascata: 1.2em dentro de 1.2em resulta em 1.44em efetivo. Util para padding e margin proporcionais ao texto.
• % (Porcentagem): Para width/height, refere-se as dimensoes do pai. Para font-size, refere-se ao font-size do pai. Amplamente usado em grids e layouts fluidos.

3. Unidades de Viewport

Unidades de viewport se baseiam nas dimensoes da janela do navegador, sendo ideais para layouts hero, secoes full-screen e tipografia fluida:

• vw: 1% da largura do viewport. 100vw = largura total da janela.
• vh: 1% da altura do viewport. 100vh = altura total da janela.
• vmin: 1% da menor dimensao do viewport (largura ou altura).
• vmax: 1% da maior dimensao do viewport.

"A tipografia fluida com clamp(min, preferred, max) combina unidades de viewport com valores fixos para escalar suavemente entre tamanhos de tela sem media queries."

4. Quando Usar Cada Unidade

Uma orientacao pratica para escolher a unidade certa:

• Font-size: rem para consistencia global, em para componentes que devem escalar com o proprio texto.
• Padding / Margin: rem para espacamento consistente, em para padding interno de componentes de texto.
• Width / Height: % para layouts fluidos, px para tamanhos fixos, vw/vh para elementos que ocupam fracao da tela.
• Bordas e sombras: px, pois devem ser precisas e nao escalar.
• Media queries: em ou rem, pois respeitam o zoom do usuario melhor que px.

5. Unidades e Acessibilidade

Usuarios com baixa visao frequentemente configuram o tamanho da fonte padrao do navegador para um valor maior que 16px. Quando voce usa rem para tamanhos de fonte e espacamento, todo o layout escala proporcionalmente, respeitando a preferencia do usuario.

Usar px para font-size impede que o zoom de texto do navegador funcione corretamente em alguns contextos. Por isso, a recomendacao de acessibilidade e usar rem para font-size e em/rem para padding e margin em componentes de texto.

6. Perguntas Frequentes

Qual e a diferenca entre rem e em?

rem sempre referencia o font-size do elemento raiz (html), sendo previsivel independente do nesting. em referencia o font-size do elemento pai imediato, podendo acumular em elementos aninhados.

Como converter px para rem rapidamente?

Com a fonte base padrao de 16px, basta dividir o valor em px por 16. Ex: 24px / 16 = 1.5rem. Ou use esta ferramenta para calcular automaticamente com qualquer base configurada.

vw causa scroll horizontal em mobiles?

Sim, em alguns casos 100vw inclui a largura da scrollbar, causando overflow. Use max-width: 100% como alternativa, ou o moderno svw (small viewport width) que exclui a scrollbar.