web

Conversor de unidades CSS

Convierte px, rem, em, vw, vh, porcentaje y clamp con vista previa en vivo para tamaños CSS responsive.

Valor de entrada

Introduce una longitud CSS y elige la unidad de origen.

Valores convertidos

Listo

Convertido desde 16px con el contexto actual.

curso de unidades CSS y tamaño responsive

Qué aprenderás en este curso de unidades CSS y tamaño responsive.

Inicio del curso

Acerca de esta herramienta

El Conversor de unidades CSS / Generador clamp de DevCove ayuda a desarrolladores frontend a convertir medidas de diseño en unidades CSS y generar valores clamp() fluidos para tipografía y espaciado. Configura contexto root, padre y viewport, previsualiza resultados en breakpoints habituales, luego copia CSS listo para tu hoja de estilos.

Cómo usar esta herramienta

Usa esta herramienta al traducir especificaciones de diseño a unidades CSS o construir tipografía y espaciado fluidos:

  1. Cambia a Conversión de unidades cuando necesites equivalentes px, rem, em, %, vw o vh para un valor.
  2. Ajusta font-size root, font-size del padre y dimensiones de viewport para coincidir con tu design system o contexto de página.
  3. Haz clic en cualquier tarjeta de unidad convertida para copiar ese valor, o copia todas las unidades a la vez.
  4. Cambia a Generador clamp cuando necesites font-size o espaciado responsive con límites mínimo y máximo.
  5. Elige modo tamaño de fuente o espaciado, define valores min/max en px y el rango de viewport.
  6. Copia CSS plano, una custom property o una variable SCSS, luego revisa las barras de vista previa en anchos de viewport clave.
  7. Carga el ejemplo 16px → rem o encabezado fluido cuando quieras un punto de partida realista.

Funciones

Pensado para flujos de layout frontend, entrega de diseño y CSS responsive:

  • Conversión de valor único entre px, rem, em, %, vw y vh.
  • font-size root, font-size del padre y ancho/alto de viewport configurables.
  • Generador clamp() fluido para tipografía y espaciado.
  • Modos de vista previa de font-size y espaciado con barras de tamaño en vivo.
  • Copiar CSS, custom properties CSS o variables SCSS.
  • Ejemplos integrados px/rem y encabezado fluido.
  • Procesamiento en el cliente: tus valores permanecen en el navegador y no se suben a servidores de DevCove.
  • Límites claros: sin exportación de config Tailwind, parsing Figma ni generación completa de design system en la primera versión.

Preguntas frecuentes

¿Este conversor de unidades CSS sube mis valores?

No. Todas las conversiones y generación clamp() se ejecutan localmente en tu navegador tras cargar la página. Tu entrada no se sube a servidores de DevCove.

¿Qué unidades CSS están soportadas?

La primera versión admite px, rem, em, %, vw y vh. Las conversiones usan el font-size root, font-size del padre y dimensiones de viewport que configures en la barra de herramientas.

¿Cómo funciona el generador clamp()?

Proporcionas tamaños mínimo y máximo en px más un rango de viewport. La herramienta calcula una expresión clamp() fluida con términos rem y vw, luego previsualiza el tamaño calculado en los anchos de viewport mínimo, medio y máximo.

¿Cuándo debo cambiar font-size root o del padre?

Usa font-size root al convertir px a rem o em para tamaños a nivel de documento. Usa font-size del padre al convertir valores em dentro de un componente anidado cuyo font-size difiere del root.

¿Puedo copiar resultados para SCSS o variables CSS?

Sí. El generador clamp puede copiar CSS plano, una custom property CSS o una variable SCSS para pegar el resultado en tu flujo de hoja de estilos.

¿Por qué cambian los resultados vw/vh al editar ancho o alto del viewport?

vw y vh son relativos al viewport. La herramienta usa tus dimensiones de viewport configuradas como contexto de conversión, así que actualizar esos campos recalcula los equivalentes px, rem y em.