Conversor de Unidades CSS
Converta entre unidades CSS: px, rem, em, vw, vh e %. Configure o tamanho base da fonte e as dimensões da janela de visualização para resultados precisos.
Configurações
Todos os Equivalentes
| Unidade | Valor |
|---|---|
| px | 16px |
| rem | 1rem |
| em | 1em |
| vw | 0.833333vw |
| vh | 1.48148vh |
| % | 100% |
= 16 px
Referência Rápida (px → rem)
| px | rem | em | vw | vh |
|---|---|---|---|---|
| 8px | 0.5rem | 0.5em | 0.416667vw | 0.740741vh |
| 12px | 0.75rem | 0.75em | 0.625vw | 1.11111vh |
| 14px | 0.875rem | 0.875em | 0.729167vw | 1.2963vh |
| 16px | 1rem | 1em | 0.833333vw | 1.48148vh |
| 18px | 1.125rem | 1.125em | 0.9375vw | 1.66667vh |
| 20px | 1.25rem | 1.25em | 1.04167vw | 1.85185vh |
| 24px | 1.5rem | 1.5em | 1.25vw | 2.22222vh |
| 32px | 2rem | 2em | 1.66667vw | 2.96296vh |
| 48px | 3rem | 3em | 2.5vw | 4.44444vh |
| 64px | 4rem | 4em | 3.33333vw | 5.92593vh |
Como Converter Unidades CSS
- Defina o tamanho base da fonte (padrão: 16px) e as dimensões da janela de visualização
- Insira um valor e selecione sua unidade (px, rem, em, vw, vh ou %)
- Veja todos os valores equivalentes em outras unidades CSS
- Consulte a tabela de referência rápida para conversões comuns de px para rem
Casos de Uso
- •Design responsivo: converta valores fixos em pixels para unidades fluidas rem ou vw
- •Transferência de design: traduza especificações em pixels do Figma/Sketch para valores CSS em rem
- •Acessibilidade: use unidades rem para que o texto respeite as preferências de tamanho de fonte do usuário
- •Layout: calcule dimensões relativas à janela de visualização para seções de largura total
Fórmula
As conversões de unidades CSS dependem do tamanho base da fonte e das dimensões da janela de visualização. rem = px / baseFontSize. vw = px / viewportWidth × 100. vh = px / viewportHeight × 100.
Perguntas Frequentes
Qual é a diferença entre rem e em?
rem é relativo ao tamanho da fonte do elemento raiz (html). em é relativo ao tamanho da fonte do elemento pai. No nível raiz, ambos são idênticos.
Qual é o tamanho de fonte padrão do navegador?
A maioria dos navegadores usa 16px como padrão. Isso significa que 1rem = 16px, a menos que o tamanho da fonte raiz seja alterado.
Quando devo usar vw/vh?
Use vw (largura da janela de visualização) e vh (altura da janela de visualização) para elementos que devem escalar proporcionalmente à janela do navegador, como seções hero ou fundos em tela cheia.
Como converter px para rem?
Divida o valor em pixels pelo tamanho base da fonte. Com o padrão de 16px: 24px ÷ 16 = 1.5rem.
A unidade % é relativa a quê?
A unidade % depende do contexto no CSS. Para font-size, é relativa ao font-size do elemento pai. Para width, é relativa à largura do elemento pai.