Unidades de tallas

bookmark_border Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

The CSS Podcast - 008: Sizing Units

La Web es un medio responsivo, pero, a veces, es necesario controlar sus dimensiones para mejorar la calidad general de la interfaz. Un buen ejemplo de esto es limitar la longitud de las líneas para mejorar la legibilidad. ¿Cómo lo harías en un medio flexible como la Web?

En este caso, puedes usar una unidad ch, que es igual al ancho de un carácter “0” en la fuente renderizada en su tamaño calculado. Esta unidad te permite limitar el ancho del texto con una unidad diseñada para ajustar el tamaño del texto, lo que, a su vez, permite un control predecible independientemente del tamaño de ese texto. La unidad ch es una de las pocas unidades que son útiles para contextos específicos, como este ejemplo.

Numbers

Los números se usan para definir opacity, line-height y hasta para los valores de canal de color en rgb. Los números son números enteros sin unidades (1, 2, 3, 100) y decimales (.1, .2, .3).

Los números tienen significado según su contexto. Por ejemplo, cuando defines line-height, un número representa una proporción si lo defines sin una unidad compatible:

p {
  font-size: 24px;
  line-height: 1.5;
}

En este ejemplo, 1.5 es igual al 150% del tamaño de fuente de píxeles calculado del elemento p. Esto significa que, si p tiene un font-size de 24px, la altura de línea se calculará como 36px.

Los números también se pueden usar en los siguientes lugares:

• Cuando estableces valores para los filtros, filter: sepia(0.5) aplica un filtro de sepia 50% al elemento.
• Cuando se establece la opacidad, opacity: 0.5 aplica una opacidad 50%.
• En los canales de color: rgb(50, 50, 50), en los que los valores de 0 a 255 son aceptables para establecer un valor de color. Consulta la lección sobre colores.
• Para transformar un elemento, transform: scale(1.2) lo escala en un 120% de su tamaño inicial.

Porcentajes

Cuando usas un porcentaje en CSS, debes saber cómo se calcula. Por ejemplo,width se calcula como un porcentaje del ancho disponible en el elemento superior.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%;
}

En el ejemplo anterior, el ancho de div p es 150px, suponiendo que el diseño usa el box-sizing: content-box predeterminado.

Si configuras margin o padding como un porcentaje, representarán una parte del ancho del elemento superior, independientemente de la dirección.

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

En el ejemplo anterior, tanto margin-top como padding-left se calcularán como 150px.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

Si estableces un valor transform como un porcentaje, se basa en el elemento con el conjunto de transformaciones. En este ejemplo, p tiene un valor translateX de 10% y un width de 50%. Primero, calcula cuál será el ancho: 150px porque es el 50% del ancho de su elemento superior. Luego, toma 10% de 150px, que es 15px.

Dimensiones y longitudes

Si adjuntas una unidad a un número, se convierte en una dimensión. Por ejemplo, 1rem es una dimensión. En este contexto, la unidad que se adjunta a un número se conoce en las especificaciones como un token de dimensión. Las longitudes son dimensiones que se refieren a la distancia y pueden ser absolutas o relativas.

Largos absolutos

Todas las longitudes absolutas se resuelven en función de la misma base, lo que las hace predecibles dondequiera que se usen en tu CSS. Por ejemplo, si usas cm para ajustar el tamaño de tu elemento y, luego, lo imprimes, debería ser preciso si lo comparas con una regla. Ten en cuenta que las unidades físicas, como cm y in, no se mostrarán de forma confiable en esos tamaños en las pantallas debido a las variaciones en los tamaños de píxeles. Las unidades físicas son más adecuadas para las hojas de estilo impresas, ya que serán más confiables.

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

Si imprimieras esta página, el div se imprimiría como un rectángulo negro de 10 × 5 cm. Ten en cuenta que el CSS no solo se usa para el contenido digital, sino también para aplicar diseño al contenido impreso. Las longitudes absolutas pueden ser muy útiles cuando se diseña para impresión.

Longitud relativa

Una longitud relativa se calcula en función de un valor base, al igual que un porcentaje. La diferencia entre estos y los porcentajes es que puedes definir tamaños en función de un tamaño base relevante, como el tamaño de fuente predeterminado o las dimensiones de la ventana. Esto significa que CSS tiene unidades como ch que usan las métricas de tamaño de la fuente como base y vw, que se basa en el ancho del viewport (la ventana de tu navegador). Las longitudes relativas son particularmente útiles en la Web debido a su naturaleza responsiva.

Unidades relativas al tamaño de la fuente

CSS proporciona unidades útiles que son relativas al tamaño de los elementos de la tipografía renderizada, como el tamaño del texto en sí (unidades em) o el ancho de los caracteres de los tipos de letra (unidades ch).

Unidades relativas al viewport

Puedes usar las dimensiones del viewport (ventana del navegador) como base relativa. Estas unidades dividen el espacio disponible del viewport.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

En este ejemplo, div será el 10% del ancho del viewport porque 1vw es el 1% del ancho del viewport. El elemento p tiene un max-width de 60ch, lo que significa que no puede superar el ancho de 60 caracteres "0" en la fuente y el tamaño calculados.

Unidades alternativas relativas al viewport

El valor de las unidades relativas al viewport permanece igual, siempre y cuando el tamaño del viewport no cambie. Sin embargo, los navegadores para dispositivos móviles suelen mostrar o ocultar elementos de la IU para mostrar la mayor cantidad de contenido posible en pantallas pequeñas, sin cambiar el tamaño calculado del viewport. Puedes usar alternativas a las unidades relativas a la vista para tener en cuenta estos cambios en el área visible.

Unidades relativas al contenedor

Puedes usar las dimensiones del contenedor de un elemento como base relativa. Estas unidades dividen el espacio de contenedor disponible. Son útiles dentro de las consultas de contenedores para establecer tamaños de fuente según el espacio disponible.

Unidades misceláneas

Hay otras unidades que se especificaron para tratar con tipos de valores particulares.

Unidades de ángulo

En el módulo de color, analizamos las unidades de ángulo, que son útiles para definir valores de grados, como el tono en hsl. También son útiles para rotar elementos dentro de las funciones de transformación.

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

Con la unidad de ángulo deg, puedes rotar un div 90° en su eje central.

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

Unidades de resolución

En el ejemplo anterior, el valor de min-resolution es 192dpi. La unidad dpi significa puntos por pulgada. Un contexto útil para esto es detectar pantallas de muy alta resolución, como las pantallas Retina en una consulta de contenido multimedia y publicar una imagen de mayor resolución.

Verifica tu comprensión

Pon a prueba tus conocimientos sobre el tamaño

Recursos

• CSS Spec Values and Units Level 4
• Tamaños y unidades en MDN
• Todo sobre EMS
• Explicación de los porcentajes