Converta px em rem, em, pt, picas, polegadas e mm usando o tamanho da fonte raiz, o do elemento pai e os DPI. CSS define 1 in = 96 px = 72 pt.
Por AdminRedigido com ferramentas de escrita com IAAtualizado Exemplos verificados: 7
24px equivale a 1.5rem com fonte raiz de 16 px e 96 pixels por polegada.
| Unidade | Valor | Definição |
|---|---|---|
| Pixels (px) | 24px | 1 px |
| Pontos (pt) | 18pt | 1 pt = 1/72 in |
| Paicas (pc) | 1.5pc | 1 pc = 12 pt = 1/6 in |
| Polegadas (in) | 0.25in | 1 in = DPI px |
| Centímetros (cm) | 0.635cm | 1 cm = 1/2.54 in |
| Milímetros (mm) | 6.35mm | 1 mm = 1/25.4 in |
| Quartos de milímetro (Q) | 25.4Q | 1 Q = 0.25 mm |
| em (tamanho da fonte pai) | 1.5em | 1 em = parent font size |
| rem (tamanho da fonte raiz) | 1.5rem | 1 rem = root font size |
| Porcentagem do tamanho da fonte pai (%) | 150% | 100% = parent font size |
1 px
1 rem = root font size
CSS converte comprimentos por pixels. As absolutas são fixas: 1 in = 2.54 cm = 96 px = 72 pt = 6 pc; 1 Q é um quarto de milímetro. As relativas dependem da página: 1 rem é a fonte raiz e 1 em (ou 100%) em font-size é a fonte pai. Converte-se em px e divide-se pelos px da unidade de destino.
Desenvolvedores convertem px do design em rem para seguir a fonte do leitor: com raiz padrão de 16 px, 24 px são 1.5 rem. Para impressão, use pixels por polegada; a 300 DPI, um logo de 10 mm precisa de cerca de 118 pixels. Para acompanhar a preferência do leitor, a fonte raiz também precisa respeitá-la.
Uma polegada CSS não precisa coincidir com a medida na tela. CSS define 96 px por polegada, e o pixel de referência tem ângulo visual de cerca de 0.0213°. Implementações podem ancorar unidades absolutas em medidas físicas ou pixels; mapeamento do aparelho, distância de observação e escala de impressão afetam a correspondência com a régua.
Na fórmula xₛ e xₜ são origem e destino; pₛ e pₜ, pixels por unidade de origem e destino. Os fatores usam a fonte e a densidade informadas.
Informe valor, unidades e tamanhos das fontes raiz e pai. Com raiz de 16 px, 24 px = 1.5 rem; com raiz de 20 px, 24 px = 1.2 rem. Assim, o mesmo valor em px pode corresponder a outro valor em rem quando o contexto muda.
| Valor | Origem | Destino | Condição do cálculo | Valor convertido |
|---|---|---|---|---|
| 24 | px | rem | Raiz 16 px | 1.5 |
| 24 | px | rem | Raiz 20 px | 1.2 |
| 12 | pt | px | 96 pixels/in | 16 |
| 1 | pc | pt | 96 pixels/in | 12 |
| 100 | % | em | Fonte pai 16 px | 1 |
| 10 | mm | px | 300 pixels/in | 118.110236 |
A relação CSS é 1 in = 96 px = 72 pt. No modo de outra densidade, o aplicativo conta pixels físicos nessa densidade: 10 mm × 300 ÷ 25.4 ≈ 118.110236 px. Isso não modifica a relação CSS definida pelo navegador nem mede automaticamente o tamanho real da tela.
Aqui em e porcentagem usam a fonte pai para o contexto de font-size, enquanto rem usa a raiz. Outras propriedades podem usar outra referência percentual; em também depende do local em que é usado. Zoom e densidade do dispositivo não bastam para inferir um comprimento físico.
Fonte de verificação: Verificação do exemplo: CSS Values 3 §6.1: 1rem = tamanho da fonte raiz (16 px padrão do navegador); 24 / 16 = 1.5
Fonte de verificação: Verificação do exemplo: CSS Values 3 §6.2: 1pt = 1/72 in, 1in = 96px; 12 × 96/72 = 16
Fonte de verificação: Verificação do exemplo: CSS Values 3 §6.2: 1in = 96px
Fonte de verificação: Verificação do exemplo: 1 rem = tamanho da fonte raiz (16 px); 1.5 × 16
16 pixels por padrão. Um rem é a fonte do html raiz, normalmente 16 px nos navegadores, salvo preferência do leitor ou html { font-size }. Nesse padrão, html { font-size: 62.5% } faz 1 rem = 10 px. A especificação W3C CSS Values and Units define rem; 16 px é padrão do navegador, não da especificação.
Multiplique pixels por 0.75; de pontos para pixels, por 4/3 (cerca de 1.333). Pela regra W3C CSS 1 in = 96 px = 72 pt, 1 px = 72/96 pt. Texto de 16 px é 12 pt; 11 pt num editor é cerca de 14.67 px.
rem sempre usa a fonte raiz; em usa a atual, ou a pai quando aplicado a font-size. em se acumula: lista de 1.2em dentro de outra de 1.2em tem texto 1.44 vezes a fonte de partida, antes dos dois níveis de lista. Com raiz de 16 px, 1.2rem permanece 19.2 px em qualquer nível.
Use rem para acompanhar a preferência de fonte do leitor e deixe a fonte raiz respeitar essa preferência. O zoom amplia px e rem; rem, em e porcentagens podem acompanhar preferências pelo contexto raiz ou pai. O critério WCAG 2.1, 1.4.4 (AA), exige texto ampliável a 200% sem perda de conteúdo ou função. O zoom pode atender isso com px; rem também pode respeitar a preferência quando o contexto raiz permitir.
Uma polegada CSS não precisa coincidir com a medida física na tela. CSS define 1 in = 96 px. O pixel de referência W3C corresponde a um pixel de tela de 96 DPI visto a 28 in, ângulo de cerca de 0.0213°. O mapeamento do aparelho e a distância variam; uma caixa de 96 px no celular pode medir menos que uma polegada física. Na impressão em tamanho real, 1 in corresponde a 25.4 mm, mas escala e calibração também afetam a saída.
Esta calculadora inclui 7 exemplos resolvidos com respostas de fontes independentes. Eles fazem parte do conjunto de testes e você também pode executá-los aqui.