Unidades CSS
Digite um valor e escolha a unidade para ver o mesmo tamanho em todas as unidades CSS, pronto para copiar.
O mesmo tamanho em outras unidades
- 1.5remtamanho de fonte raiz
- 1.5emtamanho de fonte do elemento pai
- 150%porcentagem do tamanho de fonte do elemento pai
- 18ptpontos
- 1.5pcpaicas
- 0.25inpolegadas
- 0.635cmcentímetros
- 6.35mmmilímetros
- 25.4Qquartos de milímetro
- 1.6667vwporcentagem da largura da viewport
- 2.6667vhporcentagem da altura da viewport
- 2.6667vminporcentagem do lado menor da viewport
- 1.6667vmaxporcentagem do lado maior da viewport
Contexto
Px para rem com 16 px
| px | rem | pt |
|---|---|---|
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 28px | 1.75rem | 21pt |
| 32px | 2rem | 24pt |
| 36px | 2.25rem | 27pt |
| 40px | 2.5rem | 30pt |
| 48px | 3rem | 36pt |
| 64px | 4rem | 48pt |
Um ponto equivale a 1,333 px, já que uma polegada tem 96 px e 72 pt. No sentido inverso, um pixel é 0,75 pt.
Como funciona
Rem se baseia no tamanho de fonte do elemento html, que é 16 px em todos os navegadores, a menos que alguém o altere. Assim, 24 px equivalem a 1,5 rem. Definir html { font-size: 62.5% } dá 10 px por rem e facilita as contas de cabeça, mas também muda tudo o que depende do tamanho padrão.
Em se baseia no tamanho de fonte do elemento pai e por isso se acumula quando os elementos estão aninhados: 1,2 em dentro de 1,2 em fica 1,44 vez maior. Porcentagem em font-size funciona do mesmo jeito, com 100 % igual a 1 em. Já a porcentagem em larguras ou margens se baseia no bloco contêiner e não é convertida aqui.
Rem é a escolha comum para tamanhos de fonte e espaçamentos, porque a página passa a seguir o tamanho que o visitante escolheu no navegador. Px em tamanhos de fonte não impede o zoom, mas ignora essa configuração, tema tratado nas diretrizes da WCAG sobre redimensionamento de texto.
Vw e vh são um por cento da largura e da altura da viewport, e vmin e vmax, um por cento do seu lado menor e maior. Os valores dependem totalmente da janela, então o botão pega o tamanho da janela que você está usando agora. No celular, vh pode mudar quando a barra de endereço aparece; dvh, svh e lvh resolvem isso.
Pt, pc, in, cm, mm e Q são unidades absolutas com proporções fixas em CSS: uma polegada equivale a 96 px, 72 pt e 2,54 cm. Na tela, isso raramente corresponde a centímetros reais, porque um pixel CSS não é um pixel físico. Elas são mais úteis em folhas de estilo para impressão.
Os valores são escritos com ponto decimal e no máximo quatro casas decimais, como o CSS exige.