Destaque Featured Destacados
Conversor de Unidades de CSS CSS Units Converter Convertidor de Unidades CSS
Converta PX, REM, EM e VH com preview em tempo real para desktop e mobile. Convert PX, REM, EM, and VH with live desktop and mobile preview. Convierte PX, REM, EM y VH con vista previa en tiempo real para desktop y mobile.
Desktop
Mobile
Descrição Overview Descripción
Ideal para design systems e layout responsivo: compare unidades relativas e absolutas, veja impacto visual imediato e ajuste sua escala tipográfica.
Great for design systems and responsive layouts: compare relative and absolute units, see visual impact instantly, and tune typographic scale.
Ideal para design systems y layout responsive: compara unidades relativas y absolutas, ve el impacto visual al instante y ajusta la escala tipográfica.
Guia da ferramenta Tool guide Guía de la herramienta
- O que são unidades absolutas e relativas no CSS Unidades absolutas (como
px) representam um valor fixo no contexto de CSS pixels. Unidades relativas (comorem,em,vh,vw,%,ch,ex,vmin,vmax,svh,lvh,dvh) dependem de algum contexto: fonte raiz, fonte do elemento pai/atual, viewport ou tamanho do container. - PX, REM e EM na prática
pxé a unidade mais direta para bordas, sombras e ajustes finos.remescala a partir dofont-sizedohtml, por isso ajuda a manter consistência global de tipografia e espaçamento.emescala pelo contexto local, sendo útil em componentes que devem crescer proporcionalmente ao próprio texto (por exemplo botões compostos). - VH e unidades de viewport
vhrepresenta porcentagem da altura da viewport (100vhocupa toda a altura visível). Em mobile, barras do navegador podem alterar a área útil, então também existemsvh,lvhedvhpara cenários com viewport dinâmica.vwsegue a mesma lógica para largura. - Outras unidades importantes
%depende da propriedade e do elemento de referência,chaproxima a largura do caractere “0”,frdistribui espaço em CSS Grid,cm/mm/in/pt/pcexistem para contextos de impressão e raramente são ideais para layout web responsivo. - O que a ferramenta faz Converte entre
px,rem,emevh, usando base tipográfica configurável e contexto de viewport. Também mostra preview visual em tempo real para desktop e celular, para você validar impacto de escala sem abrir outra aba. - Por que usar Acelera decisões de design system, documentação técnica e refatorações de CSS. Você visualiza imediatamente o efeito de trocar unidade fixa por relativa e reduz regressões em responsividade.
- Absolute vs relative CSS units Absolute units (such as
px) map to fixed CSS pixels. Relative units (rem,em,vh,vw,%,ch,ex,vmin,vmax,svh,lvh,dvh) depend on a context: root font size, local font size, viewport, or container. - PX, REM, and EM in practice
pxis straightforward for borders, shadows, and fine adjustments.remscales from the root (html) font size and is excellent for global typography/spacing consistency.emscales from local context and works well when a component should scale with its own text. - VH and viewport units
vhis a percentage of viewport height (100vhfills the visible height). On mobile, browser UI can change usable space, sosvh,lvh, anddvhexist for dynamic viewport behavior.vwis the equivalent for width. - Other useful units
%depends on property/reference context,chapproximates the width of the “0” glyph,frdistributes free space in CSS Grid, andcm/mm/in/pt/pcare mostly print-oriented. - What the tool does Converts between
px,rem,em, andvhwith configurable root size and viewport context. It also provides live visual previews for desktop and mobile so you can see scale changes instantly. - Why use it Speeds up design-system decisions, CSS refactors, and technical documentation by making unit trade-offs visible and testable in one place.
- Unidades absolutas y relativas en CSS Las unidades absolutas (como
px) representan un valor fijo en píxeles CSS. Las unidades relativas (rem,em,vh,vw,%,ch,ex,vmin,vmax,svh,lvh,dvh) dependen de un contexto: fuente raíz, fuente local, viewport o contenedor. - PX, REM y EM en la práctica
pxes directo para bordes, sombras y ajustes finos.remescala desde elfont-sizedehtml, ideal para consistencia global de tipografía y espaciado.emescala desde el contexto local y funciona bien en componentes que deben crecer con su texto. - VH y unidades de viewport
vhrepresenta porcentaje de altura del viewport (100vhocupa toda la altura visible). En móvil, la UI del navegador puede cambiar el área útil, por eso existensvh,lvhydvhpara viewport dinámico.vwaplica la misma idea al ancho. - Otras unidades útiles
%depende de la propiedad y referencia,chaproxima el ancho del carácter “0”,frreparte espacio libre en CSS Grid ycm/mm/in/pt/pcse usan más en impresión. - Qué hace la herramienta Convierte entre
px,rem,emyvhcon base tipográfica y contexto de viewport configurables. También incluye vista previa visual en tiempo real para desktop y mobile. - Por qué usarla Acelera decisiones de design system, refactors de CSS y documentación técnica al mostrar de inmediato el impacto de cada unidad.
Exemplo rápido Quick sample Ejemplo rápido
Base 16px: 24px = 1.5rem = 1.5em
Viewport 900px: 10vh = 90pxPerguntas frequentes FAQ Preguntas frecuentes
Para que serve esta ferramenta?
What is this tool for?
¿Para qué sirve esta herramienta?
Ela roda 100% no seu navegador: útil para validar, formatar ou converter dados no dia a dia de desenvolvimento.
It runs fully in your browser: useful to validate, format, or convert data in everyday development.
Funciona por completo en tu navegador: sirve para validar, formatear o convertir datos en el día a día.
Meus dados são enviados a algum servidor?
Are my inputs sent to a server?
¿Se envían mis datos a algún servidor?
O processamento é feito localmente via JavaScript. Não armazenamos o conteúdo que você cola nas caixas de texto.
Processing happens locally with JavaScript. We do not store what you paste into the text areas.
El procesamiento es local con JavaScript. No almacenamos lo que pegas en los campos de texto.
Posso usar em produção ou para dados reais?
Can I use this for real production data?
¿Puedo usarlo con datos reales en producción?
Use por sua conta e risco. Para segredos (senhas, tokens), prefira ambientes controlados e políticas da sua empresa. E lembre sempre de revisar os conteúdos gerados. Nunca confie cegamente nas coisas que vê na internet.
Use at your own risk. For secrets (passwords, tokens), prefer controlled environments and your company policies. And always review the generated contents. Never trust blindly things you see on the internet.
Úsalo bajo tu responsabilidad. Para secretos (contraseñas, tokens), prefiere entornos controlados y políticas internas. Recuerda de revisar los contenidos generados. Nunca confies ciegamente en cosas que ves en internet.