Skip to main content
FreeToolkit .ai

Conversor de Unidades CSS Convierta entre px, em, rem, %, vw, vh, vmin y vmax con viewport configurable y tamaño de fuente.

Conversor de Unidades CSS illustration
⚖️

Conversor de Unidades CSS

Convierta entre px, em, rem, %, vw, vh, vmin y vmax con viewport configurable y tamaño de fuente.

1

Configuración del contexto

Establezca las dimensiones de la ventana gráfica, el tamaño base de fuente y el tamaño del elemento principal.

2

Ingrese un valor

Escriba el valor CSS que desea convertir.

3

Seleccione unidades

Elige las unidades CSS de origen y destino.

Loading tool...

What Is Conversor de Unidades CSS?

Un convertidor de unidades CSS traduce entre las diversas unidades de longitud disponibles en CSS, teniendo en cuenta las unidades dependientes del contexto. Las unidades fijas (px) siempre representan el mismo tamaño visual. Las unidades relativas dependen del contexto: em y rem se relacionan con los tamaños de fuente, % se relaciona con el elemento principal, y las unidades de viewport (vw, vh, vmin, vmax) se relacionan con las dimensiones de la ventana del navegador. Este convertidor te permite configurar todas las variables de contexto (tamaño de viewport, tamaño de fuente base, tamaño del elemento principal) para conversiones precisas entre cualquier unidad CSS, lo que hace que los cálculos de diseño responsivo sean rápidos y precisos.

Why Use Conversor de Unidades CSS?

  • Dimensiones de ventana gráfica configurables para cálculos precisos de vw/vh.
  • Tamaño base de fuente ajustable para conversiones em/rem.
  • Tamaño del elemento principal para cálculos porcentuales.
  • Las ocho unidades fundamentales de longitud CSS.
  • Perfecto para flujos de trabajo de diseño responsivo.

Common Use Cases

Diseño Responsivo

Calcule los valores vw para la tipografía fluida y los diseños.

De Diseño a Código

Convierta las especificaciones de diseño basadas en píxeles a unidades CSS responsivas.

Accesibilidad

Convierta tamaños fijos en píxeles a unidades relativas rem.

Depuración de Diseño

Entienda cómo se traducen las diferentes unidades CSS a tamaños reales en píxeles.

Technical Guide

Las unidades de longitud CSS se dividen en dos categorías:

Absolutas:
• px: píxel CSS (1/96 de pulgada en CSS, pero 1 píxel de dispositivo en pantallas estándar)

Relativas:
• em: relativa al tamaño de fuente del elemento. 2em = 2× el tamaño de fuente actual
• rem: relativa al tamaño de fuente raíz (elemento html). Más predecible que em
• %: relativa al valor de la propiedad correspondiente del elemento principal
• vw: 1% del ancho de viewport. 100vw = ancho completo de viewport
• vh: 1% de la altura de viewport. 100vh = altura completa de viewport
• vmin: 1% de la dimensión más pequeña de viewport
• vmax: 1% de la dimensión más grande de viewport

Patrones responsivos comunes:
• Tipografía fluida: font-size: clamp(1rem, 2vw + 0.5rem, 2rem)
• Secciones de altura completa: min-height: 100vh
• Espaciado responsable: padding: 5vw

Tips & Best Practices

  • 1
    Utilice rem para los tamaños de fuente (accesibilidad). Utilice px para bordes y sombras (precisión).
  • 2
    vmin es ideal para contenedores cuadrados responsivos.
  • 3
    clamp() con unidades vw permite la tipografía fluida sin consultas multimedia.
  • 4
    100vh en dispositivos móviles puede incluir la barra de direcciones - use 100dvh (altura dinámica de ventana) en su lugar.
  • 5
    Cuando tenga dudas, comience con rem y px. Agregue vw/vh solo cuando necesite dimensionamiento relativo a la ventana gráfica.

Related Tools

Convertidor de Longitud - free online tool

Convertidor de Longitud

Convierta entre milímetros, centímetros, metros, kilómetros, pulgadas, pies, yardas, millas y millas náuticas al instante.

⚖️ Unit Converters
Convertidor de Luminancia - free online tool

Convertidor de Luminancia

Convierta entre candelas/m², nits, lamberts y pies-lamberts.

⚖️ Unit Converters
Conversor de unidades tipográficas - free online tool

Conversor de unidades tipográficas

Convierta entre px, pt, em, rem, cm, mm, pulgadas y picas con tamaño de fuente base configurable.

⚖️ Unit Converters
Conversor de Ángulos - free online tool

Conversor de Ángulos

Convierta entre grados, radianes, gradianos, arcminutos, arcosegundos y giros.

⚖️ Unit Converters

Frequently Asked Questions

Q ¿Cómo convierto px a vw?
Divida el valor en píxeles por el ancho de la ventana gráfica y multiplíquelo por 100. Ejemplo: 192px en una ventana gráfica de 1920px = 192/1920 × 100 = 10vw.
Q ¿Cuál es la diferencia entre vw y %?
vw siempre es relativo al ancho de la ventana gráfica. % es relativo al elemento principal, que puede ser más pequeño que la ventana gráfica.
Q ¿Cuándo debo usar rem en lugar de em?
Utilice rem para un tamaño coherente relativo a la raíz (sin sorpresas en cascada). Utilice em cuando desee que el tamaño se escale con el tamaño de fuente del padre más cercano.
Q ¿Qué es vmin?
vmin equivale al 1% de la dimensión menor de la ventana gráfica (ancho o alto). En una ventana gráfica de 1920×1080, 1vmin = 10.8px.
Q ¿Por qué las páginas con 100vh tienen barras de desplazamiento en dispositivos móviles?
Los navegadores móviles incluyen la barra de direcciones en el cálculo de altura de ventana. Utilice 100dvh (altura dinámica de ventana) o JavaScript para obtener la altura visible real.

About This Tool

Conversor de Unidades CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.