Design
Conversor px → rem / em
Converta pixels para rem e em (e vice-versa) com uma base configurável. Essencial para tipografia fluida e layouts responsivos.
px
O padrão do navegador é 16px. Altere se o seu projeto usar uma base diferente.
px → rem / em
Digite os pixels — os resultados são calculados instantaneamente.
px
rem / em → px
Insira um valor em rem ou em — o equivalente em px é calculado instantaneamente.
rem/em
px
Tabela de referência rápida
Base: 16px
| px | rem | em |
|---|
Conceitos-chave
rem (root em) é uma unidade relativa ao
font-size do elemento raiz (<html>). Com uma base de 16px, 1rem = 16px. Alterar o font-size do documento escala todos os valores rem proporcionalmente, simplificando o design responsivo global.
em é relativo ao
font-size do elemento pai (ou do próprio elemento quando usado para font-size). Isso pode criar efeitos compostos em elementos aninhados. rem evita esse problema ao sempre ser relativo à raiz. Para espaçamento e dimensionamento dentro de componentes isolados, em pode ser preferível.
Pixels são fixos e não respeitam a preferência de tamanho de fonte do usuário no navegador. Com
rem, se o usuário aumentar o tamanho de fonte base no navegador, todo o conteúdo escala corretamente, melhorando a acessibilidade. O WCAG 1.4.4 também recomenda que o texto possa ser ampliado até 200% sem perda de funcionalidade.
Alguns projetos usam o truque de definir
html { font-size: 62.5%; } para que 1rem = 10px, facilitando o cálculo mental. Outros frameworks ou plataformas CMS podem usar uma base diferente. Use o campo de base para adaptar o conversor ao seu projeto específico.