Conversão de unidades CSS é o processo de transformar entre várias unidades de comprimento (px, em, rem, %, vw, vh, etc.) usadas no design web.
Unidades absolutas e relativas
As unidades CSS dividem-se em absolutas e relativas. Unidades absolutas (px, pt, cm, etc.) têm tamanhos fixos, enquanto unidades relativas (em, rem, %, vw, vh, etc.) são expressas como proporções de um valor base.
px (Pixel)
A unidade mais comum, representando um ponto no ecrã. Fácil de usar por ter tamanho fixo, mas cria desafios de acessibilidade pois ignora as configurações de fonte do utilizador.
em (Em)
Unidade relativa baseada no tamanho da fonte do elemento pai. 1em = font-size do pai. Calcula-se de forma composta em estruturas aninhadas, o que pode causar tamanhos inesperados.
rem (Root Em)
Unidade relativa baseada no tamanho da fonte do elemento root (html). 1rem = font-size do html (geralmente 16px). Ao contrário de em, não é afetada por aninhamento e é recomendada no CSS moderno.
% (Porcentagem)
Representa uma proporção do tamanho do elemento pai. Para font-size baseia-se no pai; para width baseia-se na largura do pai. A referência varia conforme a propriedade.
vw/vh (Unidades de viewport)
Unidades baseadas no tamanho da viewport. 1vw = 1% da largura da viewport, 1vh = 1% da altura da viewport. Permitem layouts flexíveis que respondem ao tamanho do ecrã.
pt/pc (Unidades de impressão)
Unidades usadas na indústria de impressão. 1pt = 1/72 polegada, 1pc = 12pt. Usadas em CSS de impressão e geração de PDF; no ecrã normalmente usa-se px ou rem.
Unidades físicas (cm/mm/in)
Unidades que representam comprimento físico real. 1in = 2.54cm = 25.4mm = 96px (definição CSS). Úteis quando é necessária consistência com materiais impressos, mas o tamanho físico do ecrã não é garantido.
Vantagens da conversão em tempo real
Esta ferramenta suporta conversão em tempo real e atualiza resultados instantaneamente quando os valores base mudam. Permite verificar rapidamente a aparência em diferentes tamanhos de ecrã e configurações de fonte.