Índice
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.
Procurando por conteúdo novo?
Receba artigos e insights em nossa newsletter semanal.
Ao inserir seu email, você concorda em receber e-mails da Elementor, incluindo e-mails de marketing,
e concorda com nossos Termos e Condições e Política de Privacidade.