Conversor de Unidades CSS
Convierte entre unidades CSS: px, rem, em, vw, vh y %. Configura el tamaño de fuente base y las dimensiones del viewport para obtener resultados precisos.
Configuración
Todos los equivalentes
| Unidad | Valor |
|---|---|
| px | 16px |
| rem | 1rem |
| em | 1em |
| vw | 0.833333vw |
| vh | 1.48148vh |
| % | 100% |
= 16 px
Referencia rápida (px → rem)
| px | rem | em | vw | vh |
|---|---|---|---|---|
| 8px | 0.5rem | 0.5em | 0.416667vw | 0.740741vh |
| 12px | 0.75rem | 0.75em | 0.625vw | 1.11111vh |
| 14px | 0.875rem | 0.875em | 0.729167vw | 1.2963vh |
| 16px | 1rem | 1em | 0.833333vw | 1.48148vh |
| 18px | 1.125rem | 1.125em | 0.9375vw | 1.66667vh |
| 20px | 1.25rem | 1.25em | 1.04167vw | 1.85185vh |
| 24px | 1.5rem | 1.5em | 1.25vw | 2.22222vh |
| 32px | 2rem | 2em | 1.66667vw | 2.96296vh |
| 48px | 3rem | 3em | 2.5vw | 4.44444vh |
| 64px | 4rem | 4em | 3.33333vw | 5.92593vh |
Cómo convertir unidades CSS
- Establece tu tamaño de fuente base (predeterminado: 16px) y las dimensiones del viewport
- Introduce un valor y selecciona su unidad (px, rem, em, vw, vh o %)
- Consulta todos los valores equivalentes en otras unidades CSS
- Revisa la tabla de referencia rápida para las conversiones más comunes de px a rem
Casos de Uso
- •Diseño responsive: convierte valores de píxeles fijos a unidades fluidas rem o vw
- •Entrega de diseño: traduce especificaciones de píxeles de Figma/Sketch a valores rem de CSS
- •Accesibilidad: usa unidades rem para que el texto respete las preferencias de tamaño de fuente del usuario
- •Maquetación: calcula dimensiones relativas al viewport para secciones a sangre completa
Fórmula
Las conversiones de unidades CSS dependen del tamaño de fuente base y las dimensiones del viewport. rem = px / baseFontSize. vw = px / viewportWidth × 100. vh = px / viewportHeight × 100.
Preguntas Frecuentes
¿Cuál es la diferencia entre rem y em?
rem es relativo al tamaño de fuente del elemento raíz (html). em es relativo al tamaño de fuente del elemento padre. En el nivel raíz, ambos son idénticos.
¿Cuál es el tamaño de fuente predeterminado del navegador?
La mayoría de los navegadores tienen 16px como valor predeterminado. Esto significa que 1rem = 16px a menos que se modifique el tamaño de fuente del elemento raíz.
¿Cuándo debo usar vw/vh?
Usa vw (ancho del viewport) y vh (alto del viewport) para elementos que deben escalar proporcionalmente a la ventana del navegador, como secciones hero o fondos de pantalla completa.
¿Cómo convierto px a rem?
Divide el valor en píxeles entre el tamaño de fuente base. Con el valor predeterminado de 16px: 24px ÷ 16 = 1.5rem.
¿A qué es relativa la unidad %?
La unidad % es dependiente del contexto en CSS. Para font-size, es relativa al font-size del padre. Para width, es relativa al ancho del padre.