Antes de comenzar a utilizar propiedades que utilicen medidas, como por ejemplo width (que sirve para establecer un ancho a un elemento concreto), es conveniente conocer los tipos de unidades que pueden utilizarse en CSS para indicar medidas. Existen varios tipos de unidades, vamos a desglosarlas en grupos y explicar cada una de ellas. Más adelante veremos las propiedades que pueden utilizarlas.
Unidades absolutas
Las unidades absolutas son un tipo de medida fija (no cambia nunca). Son ideales para medios no variables como pueden ser los medios impresos, por ejemplo, pero son poco flexibles y no son útiles para conseguir adaptarse a diferentes resoluciones o pantallas, que es lo que tendemos a hacer en la web. Las diferentes unidades absolutas que pueden utilizarse en CSS son las siguientes:
| Unidad | Significado | Medida aproximada |
|---|---|---|
| in | Pulgadas | 1in = 25.4mm |
| cm | Centímetros | 1cm = 10mm |
| pc | Picas | 1pc = 4.23mm |
| mm | Milímetros | 1mm = 1mm |
| pt | Puntos | 1pt = 0.35mm |
Consejo: Los puntos (pt) suelen utilizarse para documentos CSS en los que se fija el tamaño de las fuentes en medios impresos.
Unidades relativas
Las unidades relativas son un tipo de medida más común en CSS. Dichas unidades dependen de otra (resolución, densidad de pantalla, etc...). Tienen una curva de aprendizaje más compleja, pero son las ideales para trabajar en dispositivos con diferentes tamaños, ya que son muy flexibles:
| Unidad | Significado | Medida aproximada |
|---|---|---|
| em | «M» | 1em = tamaño fuente |
| ex | «X» (~0.5em) | 1ex = ~tamaño fuente/2 |
| rem | «root M» | 1rem = tamaño fuente general |
| ch | «zero width» | 1ch = ancho del cero |
| px | Píxel | 1px = 1 píxel |
| % | Porcentaje | Relativa a herencia |
La unidad em se utiliza para hacer referencia al tamaño actual de la fuente del elemento en cuestión. Así, una cantidad de 1em sería el tamaño actual de la fuente exactamente, y una cantidad de 2em sería justo el doble. Por otro lado, 1ex es aproximadamente la mitad del tamaño de la fuente.
Realmente, la medida ex está basada en la altura de la x minúscula, que es aproximadamente un poco más de la mitad de la fuente actual (depende de la tipografía utilizada), aunque en la práctica es un tipo de unidad que no suele ser utilizada.
Otras unidades poco utilizadas son la unidad rem, que equivale al tamaño de la fuente del primer elemento HTML, o ch, que equivale al tamaño de ancho del 0 de la fuente actual.
En general, se recomienda utilizar unidades relativas siempre que sea posible, ya que son mucho más flexibles.
Truco: Cuando se especifica una unidad con valor igual a
0, como por ejemplo0px,0emo0%, se pueden omitir las unidades y escribir simplemente0.
Unidades flexibles de viewport
Existen unas unidades de "nueva generación" que resultan muy útiles, porque dependen del viewport (región visible de la página web en el navegador). Con estas unidades podemos hacer referencia a un porcentaje concreto del tamaño específico que tengamos en la ventana del navegador, independientemente de si es redimensionado o no. Las unidades son las siguientes:
| Unidad | Significado | Medida aproximada |
|---|---|---|
| vw | viewport width | 1vw = 1% ancho de navegador |
| vh | viewport height | 1vh = 1% alto de navegador |
| vmin | viewport minimum | 1vmin = 1% de alto o ancho (el mínimo) |
| vmax | viewport maximum | 1vmax = 1% de alto o ancho (el máximo) |
La unidad vw hace referencia al ancho del viewport, mientras que vh hace referencia al alto. Por ejemplo, si utilizamos 100vw estaremos haciendo referencia al 100% del ancho del navegador, o sea, todo lo que se está viendo de ancho en pantalla, mientras que si indicamos 50vw estaremos haciendo referencia a la mitad del ancho del navegador.
Por último tenemos vmin y vmax, que simplemente se utilizan para utilizar el porcentaje de ancho o alto del viewport, dependiendo cual sea más pequeño o más grande de los dos, lo que puede ser útil en algunas situaciones donde quieres flexibilidad con diseños adaptables.