Unidades de dimensionamiento

La web es un medio responsivo, pero a veces deseamos 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 haría eso en un medio flexible como la web?

Para este caso, puede usar una unidad ch, que es igual al ancho de un carácter "0" en la fuente renderizada a su tamaño calculado. Esta unidad le permite limitar el ancho del texto con una unidad diseñada para ajustar su tamaño, 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.

Números

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

Los números tienen significado según su contexto. Por ejemplo, al definir line-height, un número es representativo de una ratio si la define sin una unidad de apoyo:

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

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

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

  • Al configurar valores para filtros: filter: sepia(0.5) aplica un filtro sepia del 50%.
  • Al configurar la opacidad: opacity: 0.5 aplica una opacidad del 50%.
  • En canales de color: rgb(50, 50, 50), donde los valores 0-255 son aceptables para establecer un valor de color. Ver lección de color.
  • Para transformar un elemento: transform: scale(1.2) escala el elemento en un 120% de su tamaño inicial.

Porcentajes

Al usar un porcentaje en CSS, necesita saber cómo se calcula éste. Por ejemplo, width se calcula como un porcentaje del ancho del elemento principal.

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

div p {
  width: 50%; /* calculated: 150px */
}

En el ejemplo anterior, el ancho de div p es 150px.

Si establece margin o padding como un porcentaje, serán una porción del ancho del elemento principal, independientemente de la dirección.

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

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

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

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

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

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

Dimensiones y longitudes

Si adjunta 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 denomina en las especificaciones como un símbolo de dimensión. Las longitudes son dimensiones que se refieren a la distancia y pueden ser absolutas o relativas.

Longitudes absolutas

Todas las longitudes absolutas se resuelven contra la misma base, lo que las hace predecibles dondequiera que se utilicen en su CSS. Por ejemplo, si usa cm para dimensionar su elemento y luego imprime, debería ser exacto si lo compara con una regla.

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

Si imprimiera esta página, el div se imprimiría como un rectángulo negro de 10x5cm. Tenga en cuenta que CSS se utiliza no solo para contenido digital, sino también para diseñar contenido impreso. Las longitudes absolutas pueden resultar muy útiles a la hora de diseñar para imprimir.

Unidad Nombre Equivalente a
cm Centímetros 1 cm = 96 px/2.54
mm Milimetros 1 mm = 1/10 de 1 cm
Q Cuarto de milímetro 1Q = 1/40 de 1 cm
in Pulgadas 1 in = 2.54 cm = 96 px
pc Picas 1pc = 1/6 de 1 in
pt Puntos 1 pt = 1/72 de 1 in
px Pixeles 1 px = 1/96 de 1 in

Longitudes relativas

La longitud relativa se calcula contra un valor base, muy parecido a un porcentaje. La diferencia entre estos y los porcentajes es que puede dimensionar los elementos contextualmente. Esto significa que CSS tiene unidades como ch que usan el tamaño del texto como base y vw que se basa en el ancho de la ventana gráfica (la ventana de su navegador). Las longitudes relativas son particularmente útiles en la web debido a su naturaleza responsiva.

Unidades relativas al tamaño de fuente

CSS tiene 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 tipográficos (unidades ch).

unidad relativo a:
em En relación con el tamaño de fuente, es decir, 1.5em será un 50% más grande que el tamaño de fuente calculado base de su padre. (Históricamente, la altura de la letra mayúscula "M").
ex Heurística para determinar si se debe usar la x-height,, una letra "x" o `.5em` en el tamaño de fuente calculado actual del elemento.
cap Altura de las letras mayúsculas en el tamaño de fuente calculado actual del elemento.
ch Avance de carácter promedio de un glifo estrecho en la fuente del elemento (representado por el glifo "0").
ic Avance de carácter promedio de un glifo de ancho completo en la fuente del elemento, representado por el glifo "水" (ideograma de agua CJK, U + 6C34).
rem Tamaño de fuente del elemento raíz (el valor predeterminado es 16px).
lh Altura de línea del elemento.
rlh Altura de línea del elemento raíz.
El texto CSS es 10x grande con etiquetas para altura ascendente, altura descendente y x-height. x-height representa 1ex y 0 representa 1ch

Unidades relativas a la ventana gráfica

Puede utilizar las dimensiones de la ventana gráfica (ventana del navegador) como una base relativa. Estas unidades reparten el espacio disponible de la ventana gráfica.

unidad relativa a
vw 1% del ancho de la ventana gráfica. Se usa esta unidad para hacer trucos de fuentes geniales, como cambiar el tamaño de una fuente de encabezado en función del ancho de la página, de modo que a medida que el usuario cambia el tamaño de la ventana, la fuente también cambia de tamaño.
vh 1% de la altura de la ventana gráfica. Puede usarla para organizar elementos en una interfaz de usuario, si tiene una barra de herramientas de pie de página, por ejemplo.
vi 1% del tamaño de la ventana gráfica en el eje en línea del elemento raíz. El eje se refiere a los modos de escritura. En los modos de escritura horizontal como el inglés, el eje en línea es horizontal. En los modos de escritura vertical como algunos tipos de letra japoneses, el eje en línea va de arriba a abajo.
vb 1% del tamaño de la ventana gráfica en el eje del bloque del elemento raíz. Para el eje del bloque, esta sería la direccionalidad del lenguaje. Los idiomas LTR como el inglés tendrían un eje de bloque vertical, ya que los lectores en inglés analizan la página de arriba a abajo. Un modo de escritura vertical tiene un eje de bloque horizontal.
vmin 1% de la dimensión más pequeña de la ventana gráfica.
vmax 1% de la dimensión más grande de la ventana gráfica.
div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

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

Unidades misceláneas

Hay algunas otras unidades que se han especificado para tratar tipos particulares de valores.

Unidades angulares

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 funciones de transformación.

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

Usando launidad de ángulo deg, puede 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 pantallas Retina, en una consulta de medios y mostrar una imagen de mayor resolución.

Check your understanding

Test your knowledge of sizing

Which of the following are valid dimensions?

ui
em
cm
8th
ex
px
ux
in
ch

How are absolute and relative units different?

An absolute length is calculated against a single shared base value, where a relative unit is compared against a base value that can change.
Absolute values can't change but relative units can

Viewport units are absolute.

False
True

Recursos