Anúncios incomodam? Ir Sem anúncios Hoje 

Conversor de Pixel / REM / EM (Unidades CSS)

DesenvolvedorTexto

ANÚNCIO · REMOVER?

ENTRADA

Processo Automático

SAÍDA

Lado cliente

Unidades de Viewport

Viewport	vw	vh
360px (Mobile)
768px (Tablet)
1280px (Laptop)
1920px (Desktop)

Tabela de Referência

Pixels	REM	EM	PT
8px
10px
12px
14px
16px
18px
20px
24px
32px
48px
64px

ANÚNCIO · REMOVER?

Guia

Conversor de Pixels / REM / EM

Converta instantaneamente entre unidades CSS: pixels (px), root em (rem) e em. Ajuste o tamanho da fonte base e veja todos os valores serem atualizados em tempo real. Perfeito para desenvolvedores front-end que traduzem especificações de design em CSS.

Como usar

Insira um valor em qualquer um dos três campos de unidade — px, rem ou em — e os outros dois serão atualizados instantaneamente. Ajuste o tamanho da fonte base (padrão 16px) usando o controle deslizante ou o campo de entrada para corresponder ao tamanho da fonte raiz do seu projeto. A tabela de referência abaixo mostra conversões comuns rapidamente.

Características

Conversão bidirecional – Edite px, rem ou em e todos os outros são atualizados instantaneamente
Tamanho da Fonte Base Ajustável – Controle deslizante e entrada sincronizados, padrão 16px
Tabela de Referência – Tamanhos comuns calculados automaticamente para o seu tamanho de fonte base
Atualizações em Tempo Real – Entrada com throttling para desempenho suave
Apenas no Lado do Cliente – Nenhum dado enviado para qualquer servidor

ANÚNCIO · REMOVER?

 Perguntas frequentes

Qual é a diferença entre rem e em em CSS?

rem (root em) é relativo ao tamanho da fonte do elemento raiz (html), tornando-o consistente em toda a página. em é relativo ao tamanho da fonte do elemento pai, o que pode se acumular em elementos aninhados. rem é geralmente preferido para consistência de layout.
Por que 1rem é igual a 16px por padrão?

Os navegadores definem um tamanho de fonte raiz padrão de 16px, a menos que seja substituído. Portanto, 1rem = 16px, 0.5rem = 8px, 1.5rem = 24px. Se você definir html { font-size: 62.5%; }, então 1rem = 10px, tornando a matemática mais fácil.
Quando devo usar px em vez de rem ou em?

Use px para valores que não devem escalar com as preferências de fonte do usuário, como bordas, sombras ou pontos de interrupção de media query. Use rem para tamanhos de fonte e espaçamento para que seu layout respeite as configurações de acessibilidade do usuário. Use em para dimensionamento relativo a componentes.
Como o zoom do navegador afeta as unidades CSS?

O zoom do navegador escala todas as unidades CSS proporcionalmente, incluindo px. Isso é diferente do dimensionamento de texto no nível do sistema operacional. No entanto, se um usuário alterar o tamanho da fonte padrão do navegador, os valores rem e em se ajustam enquanto os valores px não — tornando rem/em melhores para acessibilidade.