🚀 Início rápido

Introduzir valor e unidade: p.ex., 16 + px ou 1 + rem
Definir contexto: configurar tamanho de letra da raiz/pai, tamanho do viewport e DPI (afecta rem/em/vw/vh/pt/cm, etc.)
Ver resultados: as restantes unidades são calculadas instantaneamente e podem ser copiadas
Breakpoints: alternar móvel/tablet/desktop para validar em diferentes ecrãs

📌 Cenários comuns

Utilização: layouts responsivos, passagem design‑→dev, correlação densidade/impressão, unificação de convenções

🧭 Dicas de uso

Definir base: 16px na raiz é comum e facilita contas rem ↔ px
Texto em rem: permite escala global e acessibilidade; em para escala local em componentes
Layout com viewport: combinar com breakpoints e clamp/min/max para evitar extremos
Decimais e arredondamento: manter precisão razoável para boa legibilidade

🎛️ Parâmetros e contexto

REM base (Root Font Size): determina rem ↔ px. 16px é comum (1rem≈16px). Ajuste quando a base do design for diferente.
EM base (Parent Font Size): determina em e % (quando a referência é Tamanho de letra). Útil para escala local do componente.
Referência de %: escolha Tamanho de letra / Largura / Altura conforme o contexto (layout vs tipografia).
Presets de breakpoint definem também o tamanho do viewport para estimativas rápidas (não é media query em runtime).
Tamanho de viewport para vw/vh/vmin/vmax e % (largura/altura). Dispositivos variam por barras/zonas seguras/scrollbars.
DPI (pontos por polegada): para pt/pc/in/cm/mm/q ↔ px. Padrão 96; impressão/HiDPI use o valor do dispositivo.
Dicas: 1) use 16px e 96 DPI como base; 2) valide % de layout alternando breakpoints; 3) estimativa de projeto, não substitui o cálculo final do navegador.

⚠️ Limitações e compatibilidade

% depende da propriedade (width/height/line-height diferem); a ferramenta estima casos comuns
ex/ch dependem de métricas da fonte; variam entre fontes/navegadores
Unidades de viewport variam com barras/zonas seguras; admita pequenas discrepâncias
Unidades físicas ↔ px variam com o DPI; em impressão/HiDPI valide com cuidado

🔒 Privacidade e segurança

Todo o processamento ocorre no seu navegador; os dados não saem do seu dispositivo

❓ Perguntas frequentes

Diferença entre rem e em?

rem depende da raiz (escala global previsível); em depende do pai (bom para escala local)

Usar px ou rem?

Prefira rem para layout e texto (a11y); px serve para ícones/bordas nítidos

Porque vw/vh variam entre dispositivos?

Barra de endereço/zonas seguras/scroll influenciam o viewport; combine com clamp()/min()/max() e breakpoints

Como converter pixels de ecrã em unidades de impressão?

Defina DPI (p.ex., 96/72/300). Ecrã→impressão aqui é estimativa; use provas e perfis ICC