Converta entre pixels (PX), root em (REM) e em (EM) com esta calculadora simples. Essencial para design e desenvolvimento web responsivo.
Converta entre pixels (PX), root em (REM) e em (EM). Insira um valor em qualquer campo para ver os valores equivalentes nas outras unidades.
Entender e converter entre unidades CSS é essencial para o design e desenvolvimento responsivo da web. As unidades PX (pixel), REM (root em) e EM são blocos de construção fundamentais que determinam como os elementos são dimensionados e posicionados em diferentes dispositivos e tamanhos de tela. Esta ferramenta abrangente de conversão de unidades permite que você traduza facilmente valores entre essas três unidades CSS críticas, ajudando você a criar layouts web mais flexíveis e de fácil manutenção.
Pixels (PX) são unidades de tamanho fixo que oferecem controle preciso, mas carecem de escalabilidade, enquanto as unidades REM escalam em relação ao tamanho da fonte do elemento raiz, e as unidades EM escalam em relação ao tamanho da fonte de seu elemento pai. Converter entre essas unidades pode ser desafiador, especialmente ao trabalhar com designs complexos ou ao suportar recursos de acessibilidade, como redimensionamento de texto. Nosso conversor de PX, REM e EM simplifica esse processo, permitindo que você se concentre em criar designs bonitos e responsivos.
Pixels (PX) são a unidade CSS mais básica e comumente usada. Um pixel é um único ponto em uma grade de imagem digital e representa o menor elemento controlável em uma tela. No CSS, os pixels fornecem uma unidade de medida de tamanho fixo que permanece consistente, independentemente de outros fatores de estilo.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6
Características principais dos pixels:
As unidades REM (root em) são unidades relativas que escalam com base no tamanho da fonte do elemento raiz (tipicamente o elemento <html>
). Por padrão, a maioria dos navegadores define o tamanho da fonte raiz como 16px, fazendo com que 1rem seja igual a 16px, a menos que seja explicitamente alterado.
1html {
2 font-size: 16px; /* Padrão na maioria dos navegadores */
3}
4
5.element {
6 width: 12.5rem; /* Equivalente a 200px com o tamanho da fonte raiz padrão */
7 font-size: 1rem; /* Equivalente a 16px */
8 margin: 0.625rem; /* Equivalente a 10px */
9}
10
Características principais das unidades REM:
As unidades EM são unidades relativas que escalam com base no tamanho da fonte de seu elemento pai. Se nenhum tamanho de fonte for especificado para o pai, as EMs farão referência ao tamanho da fonte herdada.
1.parent {
2 font-size: 20px;
3}
4
5.child {
6 font-size: 0.8em; /* Equivalente a 16px (20px × 0.8) */
7 margin: 0.5em; /* Equivalente a 8px (16px × 0.5) */
8}
9
Características principais das unidades EM:
Entender as relações matemáticas entre as unidades PX, REM e EM é crucial para conversões precisas. Aqui estão as fórmulas usadas em nosso conversor:
Para converter pixels em unidades REM, divida o valor em pixels pelo tamanho da fonte raiz:
Por exemplo, com o tamanho da fonte raiz padrão de 16px:
Para converter pixels em unidades EM, divida o valor em pixels pelo tamanho da fonte do elemento pai:
Por exemplo, com um tamanho de fonte pai de 16px:
Para converter unidades REM em pixels, multiplique o valor em REM pelo tamanho da fonte raiz:
Por exemplo, com o tamanho da fonte raiz padrão de 16px:
Para converter unidades EM em pixels, multiplique o valor em EM pelo tamanho da fonte do elemento pai:
Por exemplo, com um tamanho de fonte pai de 16px:
Para converter unidades REM em unidades EM, você precisa levar em conta tanto o tamanho da fonte raiz quanto o tamanho da fonte do elemento pai:
Se tanto o tamanho da fonte raiz quanto o pai forem iguais (por exemplo, 16px), então 1rem = 1em.
Para converter unidades EM em unidades REM, use a seguinte fórmula:
Novamente, se ambos os tamanhos de fonte forem iguais, então 1em = 1rem.
Nossa ferramenta de conversão torna fácil traduzir valores entre unidades PX, REM e EM. Aqui está um guia passo a passo para usar o conversor de forma eficaz:
<html>
Entender quando usar cada unidade CSS e como converter entre elas é crucial para um desenvolvimento web eficaz. Aqui estão algumas aplicações práticas e cenários onde nosso conversor de unidades se mostra inestimável:
Converter entre unidades é essencial para criar designs verdadeiramente responsivos:
1/* Converta valores fixos em pixels para unidades REM responsivas */
2.container {
3 /* De: padding: 20px; */
4 padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5
6 /* De: margin-bottom: 32px; */
7 margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9
Usar unidades relativas melhora a acessibilidade respeitando as preferências do usuário:
Os sistemas de design modernos se beneficiam do uso cuidadoso de unidades:
Criar tipografia harmoniosa requer uma seleção cuidadosa de unidades:
1/* Sistema tipográfico usando unidades REM */
2h1 { font-size: 2.5rem; } /* 40px */
3h2 { font-size: 2rem; } /* 32px */
4h3 { font-size: 1.5rem; } /* 24px */
5h4 { font-size: 1.25rem; } /* 20px */
6p { font-size: 1rem; } /* 16px */
7small { font-size: 0.875rem; } /* 14px */
8
Ao implementar designs de ferramentas como Figma ou Photoshop:
Embora PX, REM e EM sejam as unidades mais comuns, existem alternativas que vale a pena considerar:
A história das unidades CSS reflete a evolução mais ampla do design web, desde layouts estáticos até as abordagens responsivas e acessíveis de hoje.
Nos primeiros dias do CSS, os pixels reinavam supremos. Designers da web criavam layouts de largura fixa, tipicamente 640px ou 800px de largura para acomodar resoluções de tela comuns. A acessibilidade e a diversidade de dispositivos não eram preocupações principais, e o controle perfeito era o objetivo primário.
À medida que os tamanhos de tela se diversificavam, layouts baseados em porcentagem ganharam popularidade. Designers começaram a criar designs mais flexíveis, embora a tipografia muitas vezes permanecesse em unidades de pixel. Esta era viu a introdução das unidades EM no CSS, embora sua adoção fosse limitada devido à complexidade de gerenciar tamanhos de fonte em cascata.
A introdução do iPhone em 2007 transformou o design web. De repente, os sites precisavam funcionar em telas tão pequenas quanto 320px de largura. Isso catalisou o interesse em técnicas de design responsivo e unidades relativas. As limitações das unidades EM (particularmente o efeito em cascata) se tornaram mais evidentes à medida que os designs se tornavam mais complexos.
O artigo influente de Ethan Marcotte sobre design web responsivo em 2010 mudou a forma como os desenvolvedores abordavam as unidades CSS. A unidade REM foi introduzida no CSS3, oferecendo os benefícios da escalabilidade relativa sem as complicações em cascata das unidades EM. O suporte do navegador para unidades REM cresceu continuamente durante este período.
O desenvolvimento web de hoje abraça uma mistura de unidades para diferentes propósitos:
Essa evolução reflete a transição da web de um meio baseado em documentos para uma plataforma de aplicação complexa que deve funcionar em incontáveis dispositivos e contextos.
1// Converter entre unidades PX, REM e EM
2const pxToRem = (px, rootFontSize = 16) => {
3 return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7 return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11 return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15 return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19 return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23 return em * (parentFontSize / rootFontSize);
24};
25
26// Exemplo de uso
27console.log(pxToRem(24)); // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
31
1:root {
2 /* Tamanhos de fonte base */
3 --tamanho-fonte-raiz: 16px;
4 --tamanho-fonte-base: var(--tamanho-fonte-raiz);
5
6 /* Valores em pixels comuns convertidos para REM */
7 --espaco-4px: 0.25rem;
8 --espaco-8px: 0.5rem;
9 --espaco-16px: 1rem;
10 --espaco-24px: 1.5rem;
11 --espaco-32px: 2rem;
12 --espaco-48px: 3rem;
13
14 /* Escala tipográfica */
15 --texto-xs: 0.75rem; /* 12px */
16 --texto-sm: 0.875rem; /* 14px */
17 --texto-base: 1rem; /* 16px */
18 --texto-lg: 1.125rem; /* 18px */
19 --texto-xl: 1.25rem; /* 20px */
20 --texto-2xl: 1.5rem; /* 24px */
21}
22
23/* Exemplo de uso */
24.card {
25 padding: var(--espaco-16px);
26 margin-bottom: var(--espaco-24px);
27 font-size: var(--texto-base);
28}
29
30.card-title {
31 font-size: var(--texto-xl);
32 margin-bottom: var(--espaco-8px);
33}
34
1// Funções SCSS para conversão de unidades
2@function px-to-rem($px, $root-font-size: 16) {
3 @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7 @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11 @return $rem * $root-font-size * 1px;
12}
13
14// Exemplo de uso
15.element {
16 padding: px-to-rem(20);
17 margin: px-to-rem(32);
18 font-size: px-to-rem(18);
19
20 .nested {
21 // Usando o tamanho da fonte pai (18px) para conversão em em
22 padding: px-to-em(16, 18);
23 margin-bottom: px-to-em(24, 18);
24 }
25}
26
1def px_to_rem(px, root_font_size=16):
2 """Converter pixels para unidades REM"""
3 return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6 """Converter unidades REM para pixels"""
7 return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10 """Converter pixels para unidades EM"""
11 return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14 """Converter unidades EM para pixels"""
15 return em * parent_font_size
16
17# Exemplo de uso
18print(f"16px = {px_to_rem(16)}rem") # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px") # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em") # 24px = 1.5em
21
As unidades REM (root em) são relativas ao tamanho da fonte do elemento raiz (tipicamente o elemento <html>
), enquanto as unidades EM são relativas ao tamanho da fonte de seu elemento pai. Essa diferença fundamental significa que as unidades REM mantêm o dimensionamento consistente em todo o seu documento, independentemente do aninhamento, enquanto as unidades EM podem criar um efeito de compounding quando os elementos estão aninhados.
Não há uma única "melhor" unidade para todas as situações. Uma combinação de unidades é tipicamente mais eficaz:
A abordagem ideal é usar cada unidade para o que faz melhor dentro de um sistema coeso.
O padrão de 16px foi estabelecido como um padrão de legibilidade que funciona bem em dispositivos. Pesquisas mostraram que texto em torno de 16px é ideal para leitura em telas a distâncias de visualização típicas. Esse padrão também fornece uma boa base para acessibilidade, garantindo que o texto não fique muito pequeno para a maioria dos usuários.
Sim, o CSS suporta valores negativos para muitas propriedades usando qualquer tipo de unidade. Margens negativas, traduções e posições são casos de uso comuns para valores negativos. Nosso conversor lida corretamente com valores negativos para todos os tipos de unidades.
As unidades EM se acumulam quando os elementos estão aninhados. Por exemplo:
1.parent {
2 font-size: 16px;
3}
4.child {
5 font-size: 1.5em; /* 24px (16px × 1.5) */
6}
7.grandchild {
8 font-size: 1.5em; /* 36px (24px × 1.5) */
9}
10
Esse efeito de compounding pode ser útil para criar designs proporcionais, mas requer gerenciamento cuidadoso para evitar escalonamentos indesejados.
Os navegadores lidam com valores subpixel de maneira diferente. Alguns navegadores arredondam para o pixel mais próximo, enquanto outros suportam renderização subpixel para escalonamento mais suave. Isso pode ocasionalmente causar pequenas inconsistências entre navegadores, especialmente com pequenos valores REM/EM ou ao usar transformações. Para a maioria dos casos de uso, essas diferenças são negligenciáveis.
Não há diferença significativa de desempenho entre o uso de pixels, REM ou EM em navegadores modernos. A escolha das unidades deve ser baseada nos requisitos de design, comportamento responsivo e necessidades de acessibilidade, em vez de considerações de desempenho.
"CSS Values and Units Module Level 3." W3C Recommendation. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Responsive Web Design." A List Apart, 25 de maio de 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/
"CSS Units." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS Pixels vs. Physical Pixels." Stack Overflow Documentation. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "The Lengths of CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"Using CSS custom properties (variables)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"Understanding and Using rem Units in CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Pare de lutar com conversões manuais de unidades CSS e deixe nosso Conversor de Unidades PX, REM e EM fazer o trabalho por você. Seja construindo um site responsivo, criando um sistema de design ou apenas aprendendo sobre unidades CSS, esta ferramenta economizará seu tempo e garantirá precisão. Insira seus valores agora para ver como a conversão de unidades pode ser fácil!
Descubra mais ferramentas que podem ser úteis para o seu fluxo de trabalho