Conversor de unidades CSS

Convierte entre px, rem, em, vw, vh, pt, cm, mm, in y % con un contexto configurable.

Ajustes de contexto

Convertir

Resultados

Referencia de las unidades CSS

Unidades absolutas

Unidades relativas

¿Cuándo usar rem o em?

Usa rem para un dimensionamiento coherente (márgenes, padding, tamaños de fuente) · siempre hace referencia a la raíz. Usa em cuando quieras un dimensionamiento relativo al padre, como componentes anidados que se adaptan a su contexto.

¿Por qué px no siempre equivale a un píxel físico?

El px CSS es un «píxel de referencia» definido como 1/96 de pulgada a distancia de brazo. En pantallas de alta densidad (HiDPI), un px CSS puede corresponder a 2 o 3 píxeles físicos.

El píxel de referencia CSS, la piedra angular de toda unidad absoluta

Las unidades absolutas de CSS (in, cm, mm, Q, pt, pc, px) están ancladas al píxel de referencia CSS. El W3C, en su CSS Values and Units Module Level 3, lo define como «el ángulo visual de un píxel en un dispositivo con una densidad de píxeles de 96 dpi y a una distancia del lector de la longitud de un brazo». Para una longitud de brazo de unas 28 pulgadas, ese ángulo visual es de aproximadamente 0,0213°, equivalente a unos 0,26 mm de anchura física de pantalla a una distancia de visualización típica, y la especificación ilustra que el mismo ángulo visual se traduce en unos 1,3 mm a 12 pies, razón por la cual los píxeles de un proyector o un televisor pueden ser físicamente mayores y aun así contar como un píxel CSS cada uno.

Para las pantallas, la especificación define en CSS 1in = 96 px en lugar de derivarlo de las pulgadas reales de la pantalla. Esto significa que las conversiones de la tabla anterior son exactas y no dependen del DPI de la pantalla: 12 pt siempre son 16 px, 1 pc siempre son 16 px, 1 mm siempre son unos 3,78 px. En una pantalla de alto DPI (Retina, 4K), el sistema operativo asigna cada píxel CSS a los píxeles de dispositivo que mejor aproximen el ángulo visual: normalmente 2 píxeles de dispositivo por píxel CSS en un MacBook Retina, 3 en un iPhone Pro y 1,5 en un escritorio Windows con un escalado del 150 %. Un borde nítido de 1px en una pantalla Retina ocupa 2 píxeles de dispositivo.

Unidades relativas a la fuente

Estas se resuelven en función de la tipografía, no de las pulgadas físicas. Son la base de los diseños accesibles y escalables.

em es la piedra angular y tiene una sorprendente profundidad histórica: es anterior a CSS en unos 500 años. En la imprenta de tipos móviles (posterior a Gutenberg, hacia 1450), el «cuadratín» era un bloque cuadrado de metal cuya anchura igualaba la altura del cuerpo del tipo y que, históricamente, se aproximaba a la anchura de la M mayúscula. CSS toma prestada la abstracción: 1em equivale al tamaño de fuente calculado del elemento actual. La famosa trampa es que las declaraciones anidadas font-size: 1.2em se multiplican: un hijo de 1.2em dentro de un padre de 1.2em se representa a 1,44× respecto al abuelo.

rem («root em») se añadió en CSS3 precisamente para resolver ese problema de multiplicación. 1rem equivale al tamaño de fuente del elemento raíz <html>, sin verse afectado por el anidamiento de los elementos padres. Los navegadores fijan la raíz en 16 px de forma predeterminada, salvo que el usuario lo anule, de modo que 1rem = 16px en condiciones predeterminadas. rem llegó en Safari 4.1 y Firefox 3.6 en 2010, y en IE9 en marzo de 2011; IE8 nunca lo admitió, lo que obligó a usar valores de reserva en px hasta alrededor de 2014.

Entre las unidades relativas a la fuente más recientes (CSS Values 4) se incluyen ch (la anchura del carácter «0» en la fuente actual, útil para anchuras máximas de longitud de línea como max-width: 60ch o 66ch, que se sitúan en el rango de lectura tipográficamente ideal de 45 a 75 caracteres), ex (la altura x de la fuente), cap (la altura de las mayúsculas), ic (el avance del ideograma CJK 水) y lh / rlh (la altura de línea calculada del elemento / de la raíz, útil para el ritmo vertical).

Unidades de porcentaje de viewport (y el problema de la barra de direcciones en el móvil)

Las cuatro clásicas, vw, vh, vmin, vmax: representan el 1 % del ancho del viewport, el 1 % del alto del viewport, el 1 % del menor de los dos y el 1 % del mayor. A 1920 × 1080: 1vw = 19.2px, 1vh = 10.8px.

100vh fue durante mucho tiempo un quebradero de cabeza en el móvil, porque tanto iOS Safari como Chrome Mobile muestran una barra de URL que se retrae a medida que te desplazas. Los navegadores tenían que elegir: hacer que 100vh fuera igual al viewport corto (con la barra de URL visible, el contenido se recorta tras desplazarse) o al alto (con la barra de URL oculta, queda un gran espacio vacío en el primer renderizado). iOS Safari optó por el comportamiento alto, lo que dejó a los desarrolladores depurando durante años aquello de «¿por qué mi sección hero es más alta que la pantalla?».

La iniciativa Interop 2022 (Apple, Google, Igalia, Microsoft, Mozilla y otros) añadió nuevas variantes de viewport en marzo de 2022 para solucionar esto:

Receta práctica: min-height: 100svh en una sección hero para que no se recorte en iOS, o height: 100dvh en un modal a pantalla completa. Safari fue el primero en añadir compatibilidad (15.4, marzo de 2022); Firefox 101 (mayo de 2022); Chrome y Edge 108 (diciembre de 2022). Hoy la compatibilidad global es amplia.

Unidades de consulta de contenedor

Una familia más reciente, cqw, cqh, cqi, cqb, cqmin, cqmax: permite que un elemento se dimensione en función de su contenedor en lugar del viewport. Es esencial para el diseño orientado a componentes, donde el mismo componente podría aparecer con 300 px de ancho en una barra lateral y 900 px de ancho en una columna principal. La unidad se evalúa respecto al contenedor ancestro más cercano que tenga definido container-type; si no existe ningún contenedor válido, la especificación recurre a la unidad de viewport pequeño en ese eje. Las consultas de contenedor (y sus unidades) llegaron en Chromium 105 en 2022, en Safari 16 en septiembre de 2022 y en Firefox 110 en febrero de 2023, y pasaron a tener el estado Baseline de disponibilidad reciente en 2023.

Los porcentajes, y por qué en realidad no son una longitud

Los porcentajes no son una unidad de longitud en sí, sino un tipo de valor independiente que se resuelve según el contexto:

Debido a esta resolución contextual, % no puede convertirse sin más a px sin conocer la dimensión del padre; por eso el conversor de arriba la pide de forma explícita.

Guía práctica: cuándo usar cada unidad

Tipografía fluida con clamp()

clamp(MIN, PREFERRED, MAX) devuelve el valor preferido, acotado por el suelo y el techo. El patrón clásico de tipografía fluida combina un suelo y un techo en rem con un término intermedio de escalado impulsado por vw:

h1 { font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3rem); }

El término intermedio escala linealmente con el viewport, mientras que el suelo y el techo basados en rem evitan tamaños extremos y preservan el escalado de fuente del usuario. clamp() alcanzó el estado Baseline de disponibilidad amplia en julio de 2020 (Chrome 79, Firefox 75, Safari 13.1). Herramientas como Utopia (utopia.fyi) y fluid-type-scale.com toman las anchuras mínima y máxima de viewport, los tamaños de fuente mínimo y máximo y una razón de escala modular (1,2, 1,25, 1,333, 1,5, áurea), y generan declaraciones listas para pegar.

Accesibilidad: WCAG SC 1.4.4 Cambio de tamaño del texto

La norma exige que el texto se pueda ampliar hasta el 200 % de su tamaño original sin pérdida de contenido ni de funcionalidad. No impone una unidad concreta, pero entre las técnicas suficientes que enumera figura «usar medidas que sean relativas a otras medidas del contenido»; las unidades relativas (em, rem, %) facilitan el cumplimiento; los diseños basados solo en píxeles pueden aprobar mediante el zoom del navegador, pero son más frágiles. La prueba mental: ¿debería esto escalar cuando el usuario amplía el tamaño de su texto predeterminado? Si es así, usa rem. Los bordes, el relleno decorativo y la decoración pura pueden seguir en px.

Más preguntas

¿Por qué 1in no es en realidad una pulgada en mi pantalla?

Porque la especificación de CSS ancla las unidades absolutas a una referencia de ángulo visual en lugar de a pulgadas físicas. Un 1in de CSS se define como exactamente 96 píxeles CSS, que el navegador asigna a los píxeles de dispositivo que mejor aproximen la referencia a una distancia de visualización típica. En la mayoría de los monitores eso acaba estando cerca de una pulgada real, pero en un televisor visto desde el otro extremo de la habitación será físicamente mayor, y en un portátil de alto DPI sobre tu regazo podría ser ligeramente menor. Para una medición física real, usa una regla contra la pantalla.

¿Cuál es el «truco del 62,5 %» que la gente menciona a veces?

Un patrón muy utilizado: html { font-size: 62.5%; }. Como 62,5 % × 16 = 10, esto hace que 1rem = 10px: cómodo para el cálculo mental (1.6rem = 16px, 2.4rem = 24px). Es objeto de debate; sus detractores sostienen que anula el tamaño de fuente predeterminado preferido del usuario y resulta algo hostil para la accesibilidad. Muchos equipos modernos eligen una razón que preserve de forma explícita la anulación del usuario (por ejemplo, definir el font-size del body en rem para que la cascada respete el valor predeterminado del usuario).

¿Cuándo debería usar vw en lugar de cqw?

Usa vw cuando el tamaño deba seguir al viewport (texto hero a sangre completa, modales a pantalla completa). Usa cqw cuando el tamaño deba seguir al contenedor del componente: por ejemplo, el título de una tarjeta que es mayor cuando la tarjeta está en la columna principal y menor cuando está en una barra lateral, con independencia del tamaño del viewport. Las unidades de consulta de contenedor llegaron en 2022-2023 y son la respuesta correcta casi siempre que, de otro modo, recurrirías a una escala de fuente basada en consultas de medios para un único componente.

¿Cuál es la diferencia entre dpi y dppx en las consultas @media?

Ambas expresan la resolución. dppx significa «puntos por píxel CSS»; 1dppx = 96dpi, ya que CSS define 96 px por pulgada. @media (min-resolution: 2dppx) apunta a las pantallas de clase Retina, donde cada píxel CSS se representa con al menos 2 píxeles de dispositivo. En general, es preferible usar dppx porque se mantiene al margen de la confusión entre los dpi y la pulgada CSS.

¿Se envía algo a un servidor?

No. Las conversiones son operaciones aritméticas sencillas de JavaScript que se ejecutan localmente en tu navegador. Nada de lo que introduces se envía a ningún sitio; la página funciona sin conexión una vez cargada.

Herramientas relacionadas

Conversor gratuito de PX a REM Generador CSS Border Radius Conversor de unidades gratuito en línea