O que é um Conversor de Unidades CSS?
Um conversor de unidades CSS traduz valores entre diferentes unidades de medida CSS, como pixels (px), root em (rem), em, pontos (pt), porcentagens (%), largura da viewport (vw) e altura da viewport (vh). Entender como essas unidades se relacionam é essencial para criar layouts web responsivos que se adaptem a diferentes tamanhos de tela e preferências do usuário.
Como usar o Conversor de Unidades CSS
- 1Digite no campo de valor o número que deseja converter.
- 2Selecione a unidade de origem no menu suspenso.
- 3Opcionalmente, ajuste o tamanho de fonte base, a largura e a altura da viewport para corresponder às configurações do seu projeto.
- 4Veja abaixo todos os valores convertidos nas unidades compatíveis.
- 5Clique no botão de cópia ao lado de qualquer valor convertido para copiá-lo para a área de transferência.
Casos de uso
Migração de px para rem
Converta designs baseados em pixels para unidades rem a fim de melhorar a acessibilidade e a escalabilidade, permitindo que o tamanho do texto respeite as preferências do navegador do usuário.
Cálculos de design responsivo
Calcule unidades relativas à viewport (vw, vh) a partir de valores em pixels para criar layouts fluidos que escalem proporcionalmente com a janela do navegador.
Implementação de design systems
Converta especificações de design de ferramentas como o Figma, que usam px, para suas unidades CSS preferidas e mantenha uma implementação consistente entre componentes.
Desenvolvimento de folhas de estilo para impressão
Converta entre unidades de tela (px, rem) e de impressão (pt) ao criar folhas de estilo CSS para documentos impressos.
Perguntas frequentes
Qual é a diferença entre rem e em?
rem (root em) é relativo ao tamanho da fonte do elemento raiz (html), permanecendo consistente em toda a página. em é relativo ao tamanho da fonte do elemento pai, portanto pode se acumular em elementos aninhados. Para dimensionamento previsível, rem costuma ser a opção preferida.
Por que 16px é o tamanho de fonte base padrão?
16px é o tamanho de fonte padrão definido pela maioria dos navegadores para o elemento html raiz. Quando nenhum tamanho personalizado é definido, 1rem equivale a 16px. Essa é a referência padrão usada nos cálculos de rem e em.
Quando devo usar unidades da viewport (vw/vh)?
Unidades da viewport são ideais para elementos que devem acompanhar o tamanho da janela do navegador, como seções hero, planos de fundo em tela cheia ou tipografia fluida. 1vw equivale a 1% da largura da viewport, e 1vh equivale a 1% da altura.
Como as unidades de porcentagem funcionam em CSS?
Neste conversor, a porcentagem é calculada em relação ao tamanho de fonte base, de forma semelhante ao comportamento de em em font-size. No CSS real, porcentagens são relativas à propriedade correspondente do elemento pai, e essa referência varia de acordo com a propriedade usada.
Os valores informados são enviados a um servidor?
Não. Todas as conversões são realizadas localmente no navegador.