Antes de comenzar a utilizar propiedades que utilicen medidas, como por ejemplo width
(propiedad que sirve para establecer un ancho a un elemento concreto), es conveniente conocer los tipos de unidades
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, ya que no tienen la capacidad de adaptarse a diferentes resoluciones o pantallas, que es lo que tendemos a hacer hoy en día.
Existen varias unidades absolutas, como se puede ver en el siguiente gráfico:
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 |
---|---|---|
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 |
px |
Píxels | 1px = 0.26mm |
Q |
Cuarto de mm | 1Q = 0.248mm |
Consejo: El punto (
pt
) podría ser una medida ideal para documentos CSS en los que se fija el tamaño de las fuentes en medios impresos.
El uso de la unidad px
está muy extendida en el desarrollo y diseño web, y es prácticamente una de las primeras unidades de CSS que se recomienda aprender. La razón, es que se trata de una unidad muy sencilla para el desarrollador: muy fácil de comprender, conocida y que nos permitirá afianzar conceptos a la vez que profundizamos en el diseño web.
No obstante, es conveniente saber que no es la única unidad, y que probablemente más adelante nos interese aprender otras unidades que pueden ser mucho más versátiles y útiles para situaciones concretas. ¡Empieza por los
px
pero una vez los domines no te quedes ahí!
Las unidades relativas son un tipo de medida mucho más potente y habitual en el CSS que creamos generalmente. Al contrario que las unidades absolutas, las unidades relativas dependen de algún otro factor (resolución, tamaño de letra, etc...). Tienen una curva de aprendizaje más compleja, pero son ideales para trabajar en dispositivos con diferentes tamaños, ya que son muy flexibles y versátiles.
Las unidades relativas más conocidas son las siguientes:
Unidad | Significado | Medida aproximada | Ejemplo |
---|---|---|---|
em |
«M» | Multiplicador del tamaño font-size en ese elemento (o heredado) |
1.5em * 16px = 24px |
ex |
«x» | Multiplicador de la mitad del tamaño font-size (altura de la x minúscula) |
1ex ~ 0.5em |
ch |
«zero width» | Multiplicador del tamaño de ancho del carácter cero ( 0 ) |
1ch ~ 1 carácter |
rem |
«root M» | Multiplicador del tamaño font-size del elemento raíz (<html> o similar) |
|
% |
Porcentaje | Relativa a herencia (concretamente, al elemento padre) | 50% = mitad del padre |
La unidad em
se utiliza para hacer referencia al tamaño actual de la fuente en ese elemento HTML. Por defecto, es un valor aproximado a 16px
(salvo que se modifique por el usuario). De esta forma, podemos trabajar simplificando las unidades a medidas en base a ese tamaño.
Por ejemplo, imaginemos que el tamaño de la fuente establecida en el navegador del usuario es exactamente 16px
. Una cantidad 1em
equivaldría a 16px
, mientras que una cantidad de 2em
sería justo el doble: 32px
. Por otro lado, una cantidad de 0.5em
sería justo la mitad: 8px
.
Existen ciertas unidades menos utilizadas dentro de las unidades relativas, como por ejemplo las unidades ex
o ch
. Mientras que la unidad em
es el tamaño de la fuente establecida por el navegador del usuario, la unidad ex
es la mitad del tamaño de la fuente establecida por el navegador del usuario, por lo que se cumple que 1ex
es igual a 0.5em
.
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). La unidad ch
por su parte, equivale al tamaño de ancho del 0
de la fuente actual, aunque como hemos dicho, en la práctica es un tipo de unidad que no se suele utilizar frecuentemente.
Una unidad muy interesante y práctica para tipografías es la unidad rem
(root em). Esta unidad toma la idea de la unidad em
, pero permitiendo establecer un tamaño base personalizado (generalmente para el documento en general, utilizando html
o la pseudoclase :root
). De esta forma, podemos trabajar con múltiplos del tamaño base:
:root {
font-size: 22px; /* Tamaño base */
}
h1 {
font-size: 2rem; /* El doble del tamaño base: 44px */
}
h2 {
font-size: 1rem; /* El mismo tamaño base: 22px */
}
Como podemos ver, posteriormente podremos ir utilizando la unidad rem
en ciertas partes del documento. Con esto, estamos indicando el factor de escala (respecto al tamaño base). En el ejemplo anterior, los elementos <h1>
tendrán 44 píxels de tamaño, ya que hemos establecido 2rem
, que significa «el doble que el tamaño base». Por otro lado, los elementos <h2>
tendrían el mismo tamaño: 22 píxels.
Esto nos da una ventaja principal considerable: Si queremos cambiar el tamaño del texto en general, sólo tenemos que cambiar el font-size
de la pseudoclase :root
, puesto que el resto de unidades son factores de escalado y se modificarán todas en consecuencia al cambio del :root
. Algo, sin duda, muy práctico y fácil de mantener.
Consejo: Cuando se especifican valores de unidades iguales a
0
, como por ejemplo0px
,0em
o0%
, podemos omitir las unidades y escribir simplemente0
, ya que en este caso particular las unidades son redundantes y no aportan valor.
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.
Estas 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
es un tipo de unidad que hace referencia al ancho del viewport (región visible de la página en el navegador). Por ejemplo, si definimos 50vw
, estamos indicando un 50% del ancho actual del navegador. Esto nos permite utilizar tamaños que dependan de las dimensiones de la ventana del navegador.
Por su parte, la unidad vh
hace referencia de la misma forma al alto del viewport. Por ejemplo, mientras 50vw
hace referencia al 50%
del ancho del navegador, si indicamos 50vh
estaremos haciendo referencia a la mitad (50%
) del alto del navegador.
Por último, tenemos las unidades vmin
y vmax
. La unidad vmin
(viewport minimum), simplemente hace referencia al valor más pequeño (mínimo) entre el tamaño de ancho y el tamaño de alto del viewport del navegador. Por otro lado, la unidad vmax
(viewport maximum) hace referencia al valor más grande (máximo) entre el tamaño de ancho y el tamaño de alto del viewport del navegador.
Esto puede ser útil en algunas situaciones donde quieres flexibilidad con diseños adaptables, y no necesitas estar haciendo cálculos previos para saber cuál es el más pequeño o más grande antes de utilizarlos.
Es interesante tener en cuenta que existen una serie de funciones para hacer cálculos con unidades CSS. Son las funciones
calc()
,min()
,max()
oclamp()
, entre otras. Las veremos más adelante, en el capítulo de funciones CSS.