Unidades de medida usadas no CSS

No CSS, as unidades de medida são fundamentais para definir tamanhos e espaçamentos em elementos. Elas se dividem em duas categorias principais: unidades absolutas e unidades relativas.

Unidades Absolutas

As unidades absolutas são fixas e não se ajustam ao tamanho da tela ou ao contexto em que estão sendo usadas. As mais comuns incluem:

Pixels (px): A unidade mais utilizada, onde 1px é igual a 1/96 de uma polegada. É ideal para definir tamanhos que não precisam ser flexíveis.
Centímetros (cm) e Milímetros (mm): Usadas raramente em telas, são mais comuns em impressão.
Polegadas (in): Também raramente utilizadas em design web, mas equivalem a 96px por polegada.
Pontos (pt) e Paicas (pc): Unidades herdadas da tipografia, onde 1pt é igual a 1/72 de uma polegada e 1pc é igual a 12pt ^[1] ^[2] ^[3].

Unidades Relativas

As unidades relativas são mais flexíveis e se adaptam ao contexto do elemento ou à configuração do usuário. As principais incluem:

Em (em): Baseada no tamanho da fonte do elemento pai. Por exemplo, se o tamanho da fonte do elemento pai for 16px, 1em será igual a 16px. Isso permite que os elementos se ajustem proporcionalmente ao tamanho da fonte ^[4] ^[5] .
Rem (rem): Semelhante ao em, mas sempre baseado no tamanho da fonte do elemento raiz (<html>). Isso evita confusões que podem ocorrer com em quando aninhados ^[6] ^[7].
Porcentagem (%): Usada para definir tamanhos relativos ao elemento pai. Por exemplo, width: 50% fará com que o elemento ocupe metade da largura do seu contêiner ^[8] ^[9].
Viewport Width (vw) e Viewport Height (vh): Representam uma porcentagem da largura ou altura da janela de visualização. Por exemplo, 100vw é igual à largura total da janela ^[10].
Vmin e Vmax: Representam a menor ou maior medida entre vw e vh, respectivamente. Isso é útil para garantir que os elementos se ajustem adequadamente em diferentes tamanhos de tela ^[11] ^[12].

Considerações Finais

A escolha entre unidades absolutas e relativas depende do design desejado e da responsividade necessária. As unidades relativas são geralmente preferidas em layouts responsivos, pois permitem que os elementos se ajustem melhor a diferentes dispositivos e configurações de usuário ^[13] ^[14].

Para saber mais acesse: