web

Conversor de unidades CSS / Gerador clamp

Converta px, rem, em, %, vw e vh com contexto configurável e gere CSS fluid com clamp() para tipografia e espaçamento.

Valor de entrada

Informe um comprimento CSS e escolha a unidade de origem.

Valores convertidos

Pronto

Convertido de 16px com o contexto atual.

Curso de unidades CSS e dimensionamento responsivo

Fluxos práticos de unidades CSS: px, rem, em, %, vw, vh, contexto do font-size raiz, clamp() fluido e depuração de layouts responsivos.

Página do curso

Sobre esta ferramenta

O Conversor de unidades CSS / Gerador clamp DevCove ajuda a converter medidas de design em unidades CSS e gerar clamp() fluido. Configure root, pai e viewport, prévia em breakpoints comuns, copie CSS pronto para a folha de estilos.

Como usar

Use ao traduzir specs de design em unidades CSS ou montar tipografia e espaçamento fluidos:

  1. Mude para Converter unidades quando precisar de px, rem, em, %, vw ou vh para um valor.
  2. Ajuste font-size da root, do pai e dimensões do viewport conforme design system ou página.
  3. Clique em um cartão de unidade para copiar ou copie todas de uma vez.
  4. Mude para Gerador clamp para font-size ou espaçamento responsivo com limites min/máx.
  5. Escolha modo fonte ou espaçamento, defina px min/máx e faixa de viewport.
  6. Copie CSS, custom property ou variável SCSS e revise barras de prévia em larguras-chave.
  7. Carregue exemplo 16px → rem ou título fluido para começar com caso realista.

Recursos

Feito para layout frontend, handoff de design e CSS responsivo:

  • Conversão de um valor entre px, rem, em, %, vw e vh.
  • font-size root/pai e largura/altura de viewport configuráveis.
  • Gerador fluid de clamp() para tipografia e espaçamento.
  • Modos de prévia de fonte e espaçamento com barras de tamanho ao vivo.
  • Copiar CSS, custom properties ou variáveis SCSS.
  • Exemplos px/rem e título fluido embutidos.
  • No cliente: valores permanecem no navegador, sem envio ao DevCove.
  • Limites: sem export Tailwind, parse Figma nem design system completo na v1.

FAQ

Este conversor envia meus valores?

Não. Conversões e geração de clamp() rodam localmente após carregar a página. Entrada não é enviada ao DevCove.

Quais unidades CSS são suportadas?

A primeira versão suporta px, rem, em, %, vw e vh, usando font-size root/pai e viewport configurados na barra.

Como funciona o gerador clamp()?

Você informa tamanhos mín./máx. em px e faixa de viewport. A ferramenta calcula clamp() com termos rem e vw e prévia nos viewports mín., médio e máx.

Quando alterar font-size root ou do pai?

Use root ao converter px para rem/em no documento. Use pai para em dentro de componente aninhado com font-size diferente da root.

Posso copiar para SCSS ou variáveis CSS?

Sim. O gerador clamp copia CSS puro, custom property ou variável SCSS para colar no seu fluxo de estilos.

Por que vw/vh mudam ao editar largura/altura do viewport?

vw e vh são relativos ao viewport. A ferramenta usa as dimensões configuradas como contexto — alterá-las recalcula px, rem e em equivalentes.