Unidades CSS

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 un determinado Tamaño. 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 que no cambia, que no depende de ningún otro factor. Son ideales para medios no variables como pueden ser los medios impresos, por ejemplo, pero son poco flexibles y adecuados para la web en la actualidad, ya que no tienen la capacidad de adaptarse a diferentes resoluciones o pantallas, que es lo que tendemos a hacer actualmente.

Sin embargo, el uso de la unidad de 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á dar los primeros pasos.

Las diferentes unidades absolutas que pueden utilizarse en CSS son las siguientes (de mayor a menor):

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: 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 flexible 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:

Unidad Significado Medida aproximada
em «M» 1em = tamaño de la fuente del navegador
ex «X» (~0.5em) 1ex = ~ mitad del tamaño de la fuente del navegador
ch «zero width» 1ch = ancho del cero
rem «root M» 1rem = tamaño fuente raíz
% 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.

Unidades CSS: em, ex

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.

Altura de la x minúscula

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 (en el elemento body):

body {
  font-size: 22px;
}

h1 { font-size: 2rem; }
h2 { font-size: 1rem; }

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.

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 ejemplo 0px, 0em o 0%, se pueden omitir las unidades y escribir simplemente 0.

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.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Escribe en Emezeta.com, es profesor en la Oficina de Software Libre de la Universidad de La Laguna y dirige el curso de Programación web FullStack de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.