Unidades y Medidas en CSS
Antes de comenzar a utilizar propiedades que utilicen medidas como el ancho de un elemento o el tamaño del borde, es conveniente conocer los tipos de unidades que pueden utilizarse en CSS para indicar un determinado tamaño .
En el mundo impreso (en España) estamos acostumbrados a medir en cm y en mm. En los medios informáticos también utilizamos los pts, pixeles o pulgadas. En la web se utilizan también otros. Vamos a ver por qué.
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, ya que no tienen la capacidad de adaptarse a diferentes resoluciones o pantallas, que es lo que tendemos a hacer hoy en día.
A continuación, podemos ver las diferentes unidades absolutas que pueden utilizarse en CSS son las siguientes (de mayor a menor tamaño):
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
### El punto 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. ##
La unidad px (píxel)
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í!
Unidades relativas
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, configuración del navegador, 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:
- em «M» 1em = tamaño de fuente establecida en el 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 de fuente personalizado
- % Porcentaje Relativa a herencia (concretamente, al elemento padre)
La unidad em
La unidad em se utiliza para hacer referencia al tamaño actual de la fuente que ha sido establecida en el navegador, que habitualmente 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.
La unidad rem (root em)
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 ejemplo 0px, 0em o 0%, podemos omitir las unidades y escribir simplemente 0, ya que en este caso particular las unidades 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.
Estas unidades son las siguientes:
- 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 hacer referencia al 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.
Propiedades calculadas
Es interesante tener en cuenta que existen una serie de funciones para hacer cálculos con unidades CSS. Son las funciones calc(), min(), max() o clamp(), entre otras. Las veremos más adelante, en el capítulo de funciones CSS.