¿Qué son las unidades absolutas?
Las unidades absolutas son un tipo de medida fija que no cambia, que no depende de ningún otro factor. Son ideales en contextos donde las medidas no varían como pueden ser en medios impresos (documentos, impresiones, etc...), pero son unidades poco adecuadas para la web moderna, donde necesitamos adaptarnos a diferentes resoluciones o pantallas.
No obstante, para comenzar, existe una unidad absoluta recomendable, que nos puede servir para dar nuestros primeros pasos en el Desarrollo web y ayudarnos a afianzar conocimientos, y así en el futuro, progresar y aprender de forma más rápida otras unidades CSS.
La unidad px (píxel)
La unidad px (píxel) es probablemente la más comunmente utilizada. Su uso está muy extendido en el desarrollo web, y es prácticamente una de las primeras unidades de CSS que se recomienda aprender, ya que su valor es siempre el mismo.
Observa el siguiente fragmento de código:
.container {
width: 300px;
height: 200px;
background: indigo;
}
<div class="container"></div>
En este fragmento utilizamos las propiedades width (tamaño de ancho) y height (tamaño de alto) para dar un tamaño concreto al elemento con clase .container. De esta forma, en todos los navegadores que veamos la página, ese elemento siempre tendrá un tamaño de 200x300 píxels.
Densidad de píxeles
Sin embargo, ten en cuenta que aunque el tamaño en píxeles siempre sea el mismo, puede observarse diferente en distintos dispositivos, ya que estos dispositivos no suelen tener la misma densidad de píxeles. Y para ello hay que entender lo que significa las siglas ppp (píxels por pulgada) o ppi en inglés (points per inch).
Imagina un elemento dibujado en una minipantalla de 1 pulgada, que tiene 10 píxels por pulgada. Obviamente, si tenemos otra minipantalla idéntica pero de 20 píxels por pulgada, se va a ver mucho mejor, porque tenemos más espacio para representar imágenes, y los píxeles se verán mucho más definidos.
Lista de unidades absolutas
A parte del píxel, es conveniente saber que no es la única unidad absoluta que existe, y que probablemente más adelante nos interese aprender otros tipos de unidades que pueden ser mucho más versátiles y útiles en situaciones concretas. A continuación, podemos ver las diferentes unidades absolutas que pueden utilizarse en CSS son las siguientes (de mayor a menor tamaño):
| Unidad | Significado | Medida aproximada |
|---|---|---|
px | Píxels | - |
pt | Puntos | 96px / 72 ~= 1.33px |
| Otras unidades | ||
in | Pulgadas | 96px |
cm | Centímetros | 96px / 2.54 ~= 37.79px |
pc | Picas | 96px / 6 ~= 16px |
mm | Milímetros | 96px / 25.4 ~= 3.78px |
Q | Cuarto de mm | 96px / 6.35 ~= ~= 15.12px |
La mayoría de estas unidades, a excepción de px, no suelen utilizarse en el día a día del desarrollo web, sino que se utilizan exclusivamente en casos concretos de medios impresos o similares.
Para entenderlas mejor, veamos en este gráfico el tamaño aproximado en comparación con todas las unidades absolutas de CSS:
No obstante, recuerda que aunque las unidades absolutas como el
pxson ideales para comenzar y entender CSS, a la larga te conviene aprender otro tipo de unidades, como las unidades relativas o las unidades de viewport.
