Conversor de PX para REM

Tabelas de Conversão de PX para REM

Pixels (PX) para REM

Pixels REM
1px 0,0625rem
2px 0,125rem
3px 0,1875rem
4px 0,25rem
5px 0,3125rem
6px 0,375rem
8px 0,5rem
10px 0,625rem
12px 0,75rem
14px 0,875rem
15px 0,9375rem
16px 1rem
18px 1,125rem
20px 1,25rem
24px 1,5rem
25px 1,5625rem
28px 1,75rem
32px 2rem
36px 2,25rem
40px 2,5rem
44px 2,75rem
48px 3rem
50px 3,125rem
56px 3,5rem
64px 4rem
72px 4,5rem
75px 4,6875rem
80px 5rem
90px 5,625rem
100px 6,25rem

REM para Pixels (PX)

Assume o tamanho padrão de fonte do navegador de 16px

REM Pixels
0,01rem 0,16px
0,03rem 0,48px
0,05rem 0,8px
0,08rem 1,28px
0,1rem 1,6px
0,15rem 2,4px
0,2rem 3,2px
0,5rem 8px
1rem 16px
2rem 32px
3rem 48px
4rem 64px
5rem 80px
6rem 96px
8rem 128px
10rem 160px
15rem 240px
20rem 320px
30rem 480px
40rem 640px
50rem 800px
60rem 960px
80rem 1280px
100rem 1600px

Conversão de PX para REM em CSS

PX (pixels) e REM (root em) são duas unidades utilizadas para definir tamanhos de elementos em Cascading Style Sheets (CSS). Compreender como converter entre elas é crucial para criar páginas web responsivas e adaptáveis.

Eis uma análise detalhada da conversão de PX para REM:

1. Unidades:

  • PX (Pixels) é uma unidade absoluta que representa um número fixo de pixels na tela. É independente das configurações de tamanho de fonte do usuário.
  • REM (Root Em): Uma unidade relativa baseada no tamanho da fonte do elemento raiz HTML. Por padrão, o tamanho da fonte raiz é 16px na maioria dos navegadores. Portanto, 1rem é equivalente a 16px.

2. Por que utilizar REM?

  • Responsividade: REM permite que os elementos escalem proporcionalmente com a preferência de tamanho de fonte do usuário. Isso é essencial para o design web responsivo, assegurando que seu site se adapte a diferentes tamanhos de tela e preferências do usuário.
  • Manutenibilidade: Utilizar REM em suas folhas de estilo facilita a manutenção de tamanhos de fonte consistentes em todo o seu site. Alterar o tamanho da fonte raiz ajusta automaticamente todos os elementos baseados em REM.

3. Fórmula de Conversão:

Para converter PX para REM, divida o valor em pixels pelo tamanho da fonte raiz (geralmente 16px):

rem_value = px_value / root_font_size

Por exemplo, para converter 24px para rem, assumindo um tamanho de fonte raiz de 16px:

rem_value = 24px / 16px = 1.5rem

4. Pontos Importantes:

  • A conversão é dependente do tamanho da fonte raiz. Se o tamanho da fonte raiz for alterado em seu CSS, os valores REM terão um efeito diferente.
  • Os navegadores geralmente utilizam um tamanho de fonte raiz padrão de 16px. No entanto, é uma boa prática definir explicitamente o tamanho da fonte raiz em seu CSS para um melhor controle.
  • Embora o REM ofereça vantagens em termos de responsividade, podem existir situações em que o PX seja preferível, como para elementos de tamanho fixo, como ícones ou bordas.

5. Considerações Adicionais:

  • Compatibilidade com Navegadores: Embora o REM seja amplamente suportado, é sempre aconselhável verificar a compatibilidade com navegadores mais antigos.
  • Elementos Aninhados: Ao utilizar REM dentro de elementos aninhados, a herança do tamanho da fonte é aplicada. O valor REM é relativo ao tamanho da fonte do elemento pai mais próximo, não ao tamanho da fonte raiz.