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
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 flexibles y adecuadas para la web actual, ya que no tienen la capacidad de adaptarse a diferentes resoluciones o pantallas, que es lo que tendemos a hacer hoy en día.
Sin embargo, el uso de la unidad px
es muy recomendable para el desarrollador (al menos en sus primeros pasos en el diseño web) ya que se trata de una unidad fácil de comprender, muy conocida y que nos permitirá afianzar conceptos a la vez que profundizamos en el diseño web.
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) es una medida que puede 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 potente en CSS. Al contrario que las unidades absolutas, las unidades relativas dependen de algún otro factor (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 y versátiles:
Unidad | Significado | Medida aproximada |
---|---|---|
em |
«M» | 1em = tamaño de fuente establecida en navegador |
ex |
«X» (~0.5em) | 1ex = ~ mitad del tamaño de fuente del navegador |
ch |
«zero width» | 1ch = tamaño de ancho del cero ( 0 ) |
rem |
«root M» | 1rem = tamaño fuente raíz |
% |
Porcentaje | Relativa a herencia (contenedor padre) |
La unidad em
se utiliza para hacer referencia al tamaño actual de la fuente que ha sido establecido en el navegador, que habitualmente es un valor aproximado de 16px
. De esta forma, una cantidad de 1em
sería este tamaño establecido por el usuario, mientras que una cantidad de 2em
sería justo el doble y una cantidad de 0.5em
sería justo la mitad. Por otro lado, con 1ex
establecemos la mitad del tamaño de la fuente, ya que 1ex = 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), o ch
, que equivale al tamaño de ancho del 0 de la fuente actual, aunque en la práctica es un tipo de unidad que no suele ser utilizada demasiado.
Una unidad muy interesante y práctica para tipografías es la unidad rem
(root em). Esta unidad es muy cómoda, ya que permite establecer un tamaño para el documento en general (utilizando el elemento body
o la pseudoclase :root
):
body {
font-size: 22px; /* Tamaño general */
}
h1 {
font-size: 2rem; /* El doble del tamaño general: 44px */
}
h2 {
font-size: 1rem; /* El mismo tamaño general: 22px */
}
Posteriormente, podemos ir utilizando la unidad rem
en ciertas partes del documento. Con esto, estamos indicando el factor de escala (respecto al tamaño general que indicamos en el body). 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 general». 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
del elemento body
, puesto que el resto de unidades son factores de escalado y se modificarán todas en consecuencia al cambio del body
. Algo, sin duda, muy práctico y fácil de modificar.
En general, en diseño web, se recomienda utilizar unidades relativas siempre que sea posible, ya que son unidades mucho más flexibles.
Truco: 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 undidades son redundantes y no aportan valor.
Unidades flexibles (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.
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.