Conversor de PX para REM

Como usar o conversor de PX para REM

1. Define o Tamanho de letra da raiz (px). É 16 em todos os principais navegadores, a menos que a tua folha de estilos o altere. Os botões por baixo do campo mudam para 16 px, 10 px (o truque html { font-size: 62.5%; }) ou 18 px.
2. Se trabalhas com em, define o Tamanho de letra do elemento pai para em (px): o tamanho de letra calculado do elemento que contém aquele que estás a estilizar.
3. Em Converter um valor, escreve em Píxeis (px), REM ou EM. Os outros dois campos atualizam-se à medida que escreves, e a linha por baixo mostra a divisão usada.
4. A Tabela de conversão em massa lista tamanhos habituais. Substitui os Valores em píxeis pelos teus próprios design tokens (escala de espaçamentos, escala tipográfica…) e usa Copiar tabela para colares o resultado numa folha de cálculo ou num documento de design.
5. Para migrar código existente, cola-o em CSS a converter, escolhe as opções e clica em Converter px em rem. Carregar um exemplo mostra uma pequena folha de estilos. Copia o CSS convertido com Copiar.

As fórmulas

• rem = px ÷ tamanho de letra da raiz. Com os 16 px por omissão, 24px = 24 ÷ 16 = 1.5rem.
• em = px ÷ tamanho de letra do elemento pai. Dentro de um título de 20 px, 10px = 0.5em.
• px = rem × tamanho de letra da raiz, e px = em × tamanho de letra do elemento pai.

rem ou em: qual usar?

O rem («root em») refere-se sempre ao tamanho de letra do elemento html, por isso 1.5rem significa o mesmo em toda a página. É a escolha mais segura para tamanhos de letra, espaçamentos, larguras máximas e espaços de layout.

O em refere-se ao tamanho de letra do próprio elemento (no caso de font-size, ao do elemento pai). Acumula-se: uma lista a 0.9em encaixada três vezes acaba a 0,9 × 0,9 × 0,9 = 73 % da base. Isso torna o em útil para coisas que devem acompanhar o seu próprio texto (o padding de um botão, o tamanho de um ícone ao lado de um rótulo) e arriscado para a tipografia global.

Porque é que o rem é importante para a acessibilidade

Muitas pessoas aumentam o tamanho de letra predefinido nas definições do navegador (por exemplo de 16 para 20 ou 24 px) em vez de fazerem zoom em cada página. Os tamanhos escritos em px ignoram essa preferência; os tamanhos em rem ou em respeitam-na. Usar rem no texto e nos espaçamentos deixa todo o layout crescer com a escolha do leitor, o que ajuda a cumprir o critério de sucesso 1.4.4 das WCAG 2.2 (redimensionar o texto até 200 %).

Pela mesma razão, evita definir html { font-size: 16px; } em px: usa uma percentagem (100%, ou 62.5% se quiseres 1rem = 10px) para que a definição do utilizador continue a aplicar-se.

O que o conversor de CSS altera

Substitui os números seguidos de px nas declarações pelo valor dividido pelo tamanho de letra da raiz. Nunca mexe em comentários, strings ou valores url().

• Manter em px as larguras de border e outline: border, border-*-width, outline, outline-offset e column-rule ficam em px, para que as linhas finas se mantenham nítidas. O border-radius continua a ser convertido.
• Manter os valores de 1px: qualquer valor entre −1px e 1px fica como está.
• Converter media queries em em (base de 16px): nas condições @media, rem e em referem-se sempre ao tamanho de letra inicial do navegador, nunca à tua regra html, por isso a ferramenta divide por 16 e escreve em, seja qual for o teu tamanho de raiz. Com a opção desmarcada, as media queries mantêm os px.