Explora cada unidad CSS — absolutas (px, cm, pt), relativas a la fuente (em, rem, ch), de viewport (vw, dvh), de consulta de contenedor, de cuadrícula (fr), de ángulo, de tiempo y de resolución — en una referencia buscable y filtrable por tipo, con una descripción, una nota de "cuándo usarla" y tokens listos para copiar. En tu navegador, gratis.

Cada unidad CSS, explicada. Todo funciona en tu navegador a partir de una referencia integrada — nada se envía al servidor.

Ninguna unidad coincide con tu búsqueda.
Prueba con otra unidad o categoría — por ejemplo rem, dvh, fr o ángulo.

Acerca de Referencia de unidades CSS

La Referencia de unidades CSS documenta cada unidad que ofrece el lenguaje —45 en total— organizadas por tipo: unidades absolutas como px, cm y pt; unidades relativas a la fuente como em, rem, ch y lh; unidades de viewport desde vw y vh hasta las más recientes svh, lvh y dvh; unidades de consulta de contenedor como cqw y cqi; la unidad de cuadrícula fr; además de ángulo, tiempo, resolución y porcentaje.

Cada tarjeta da más que una definición: el token de la unidad en monospace copiable, su nombre completo, su categoría, una descripción en lenguaje llano de cómo se calcula, y una nota práctica de “cuándo usarla” que indica dónde se gana su lugar la unidad, y dónde otra funciona mejor.

La búsqueda coincide con tokens, nombres y significados, así que rem, ancho de viewport y raíz encuentran todos sus unidades, y las etiquetas de tipo filtran la cuadrícula a una sola familia. Todo se ejecuta en tu navegador desde una referencia integrada, sin nada enviado a un servidor.

Cómo usar Referencia de unidades CSS

  1. Busca una unidad por token, nombre o significado; por ejemplo rem, ancho de viewport o ángulo.
  2. Usa las etiquetas de tipo para filtrar la cuadrícula a unidades absolutas, relativas a la fuente, de viewport, de contenedor, de cuadrícula, de ángulo, de tiempo, de resolución o de porcentaje.
  3. Lee la descripción de cada unidad y su nota de “cuándo usarla” para elegir la correcta.
  4. Haz clic en el botón de copia para obtener el token de la unidad para tu hoja de estilos.

Preguntas frecuentes

Usa rem para tamaños de fuente y cualquier cosa que deba escalar con el tamaño de texto preferido del usuario: rem sigue el tamaño de fuente raíz, así que las opciones de accesibilidad del navegador funcionan. Usa px para cosas que deben mantenerse ópticamente constantes, como bordes de un solo píxel.

em es relativo al tamaño de fuente propio del elemento actual, así que los elementos anidados componen el valor; rem siempre es relativo al elemento raíz, dando resultados predecibles. Por eso rem se ha convertido en la opción predeterminada para el espaciado y las escalas tipográficas.

Los navegadores móviles muestran y ocultan sus barras de herramientas, cambiando la altura visible, mientras que vh permanece fijo al tamaño de diseño mayor. La unidad dinámica dvh sigue la altura visible real mientras se mueven las barras de herramientas, y svh/lvh se fijan a los estados más pequeño y más grande.

fr distribuye el espacio libre de un contenedor de cuadrícula por fracción: grid-template-columns: 2fr 1fr da a la primera columna el doble del ancho sobrante que a la segunda, tras restar las pistas fijas y los espacios. Solo existe dentro de definiciones de pistas de cuadrícula.

Dimensionan elementos en relación con su contenedor de consulta más cercano en lugar del viewport: cqw es el 1% del ancho del contenedor, cqi el 1% de su tamaño en línea. Permiten que un componente se escale a la caja en la que vive, independientemente del tamaño de la pantalla.

Sí. Las 45 unidades están documentadas gratis en una página que se ejecuta completamente en tu navegador: sin registro, sin solicitudes al servidor.

¿Necesitas ayuda?
¿Encontraste un problema con esta herramienta? Avísanos.
Informar de un problema

Añade esta herramienta gratuita a tu propio sitio web: copia y pega el código de abajo.