UNIDADES DE MEDIDA CSS
Published: 2020-08-06 21:18:20

Cuando se trabaja en diseño web, además de conocer las estructuras y etiquetas fundamentales de HTML y CSS, es necesario reconocer y manejar las diferentes unidades de longitud que se utilizan para manipular el tamaño y la ubicación de los elementos en una página web. De esta manera, el siguiente post tiene como objetivo presentar las unidades de longitud más comunes. 

En CSS existen varias unidades de longitud que sirven para expresar una dimensión mediante la configuración de propiedades como `width`, `margin`, `padding`, `font-size`, etc. 
> Las dimensiones se expresan a través de un número seguido de una unidad de longitud *(25px, 4%, 7em, 30rem)*.

Existen dos tipos de unidades de longitud, __las unidades de longitud absolutas y las unidades de longitud relativas__. Cada tipo o grupo de unidades tiene características específicas y se pueden utilizan en contextos particulares, por lo cual, es importante conocer y entender cómo funcionan para que se puedan aplicar de forma correcta según las necesidades del diseño. 

__Unidades de longitud Absolutas.__

Son unidades que se caracterizan por ser fijas, invariantes y por no depender de otros factores o valores de referencia. Estas unidades asignan un valor absoluto a la dimensión que se esté definiendo, es decir, establece un valor fijo que no varía como consecuencia de factores externos como, por ejemplo, el tamaño de un contenedor o de la tipografía.

Este tipo de unidades se utilizan especialmente cuando se trabajan contenidos y diseños para medios impresos como documentos, revistas, volantes, etc. No son unidades muy apropiadas para utilizar en proyectos de desarrollo web con diseño adaptable, dado que no permiten crear estructuras flexibles que sean capaces de adaptarse a los diferentes tamaños de pantalla de los dispositivos.

Las unidades de longitud absolutas que se pueden utilizar en CSS son las siguientes: 

|    UNIDAD   |  DESCRIPCIÓN  | 
| ----------- |:-------------:| 
|   cm        | Centímetros   | 
|   mm        | Milímetros    |  
|   in        | Pulgadas      | 
|   px        | Pixeles       |  
|   pt        | Puntos        |     
|   pc        | Picas         |    
	  
Probablemente el píxel (__px__) es la unidad de medida absoluta más utilizada en diseño web. Se usa con frecuencia para definir las dimensiones de los contenedores, secciones o elementos que hacen parte del documento HTML. En seguida se presenta un ejemplo: 

```CSS
p {
 font-size: 30px;   /* Tamaño de texto de 30 pixeles.*/ 
}
    
div {
  width: 50px;      /* Define un ancho de 50 pixeles.*/
} 
```

> El píxel es la unidad mínima de resolución de una pantalla.

__Unidades de longitud Relativas.__

Las unidades de longitud relativa son aquellas que especifican un valor de longitud que *depende* o es *relativo* a otras propiedades de longitud asociadas a los elementos del documento HTML. Este tipo de unidades son las más potentes dado que permiten mayor flexibilidad y versatilidad al momento de diseñar sitios web adaptables. 

Las unidades de longitud relativas que se pueden encontrar en CSS son las siguientes: 

|    UNIDAD   |  DESCRIPCIÓN  | 
| ----------- |:-------------:| 
|   em        | Relativa al tamaño de la fuente del elemento   | 
|   ex        | Relativa a la altura x de la fuente actual    |  
|   ch       | Relativa al ancho del “0”      | 
|   rem       | Relativa al tamaño de la fuente del elemento raíz   |  
|   vw        | Relativa al 1% del ancho de la ventana del navegador (viewport)       |     
|   vh        | Relativa al 1% del alto de la ventana del navegador (viewport)        |    
|   vmin       | Relativa al 1% de la dimensión más pequeña de la ventana del navegador       | 
|   vmax      | Relativa al 1% de la dimensión más grande de la ventana del navegador      | 
|  %      | Relativa al elemento padre      | 

	
Aunque no es una regla estricta, usualmente para dimensionar una fuente o tipografía se usan las unidades __em__, __ex__ y __rem__, mientras que para establecer el tamaño de un elemento tipo `section` o `div`, se utiliza el porcentaje (__%__). A continuación, se habla un poco más en detalle sobre las unidades de longitud relativa __%__, __em__ y __rem__.

__Porcentaje (%).__ Es una de las unidades de longitud relativas más utilizadas para dimensionar y ubicar elementos en un documento HTML. Esta unidad define un valor de longitud o tamaño en función de la medida de referencia que se establezca en un elemento contenedor. 

Por ejemplo, si se tiene un elemento contenedor (`div`, `section`, `body`, `footer`, etc) configurado con un tamaño de __1000px__, los elementos internos del contenedor que se definan con una dimensión igual al __50%__, tendrán un tamaño equivalente a __500px__, dado que el porcentaje se calcula tomando como base la longitud de referencia que en este caso es __1000 pixeles__ *(1000 * (50/100) = 500px)*. 

```CSS
section {
 width: 1000px;   /* Tamaño del contenedor.*/ 
}
    
div {
  width: 50%;     /* Define un ancho de 500 pixeles.*/
} 
```
Si esta unidad de longitud se aplica a una fuente o tipografía, entonces su tamaño será relativo a la dimensión de la fuente declarada en la raíz del documento HTML. 

__Unidad Relativa em.__ Este tipo de unidad de longitud se utiliza generalmente para definir el tamaño de los textos que se incluyen en el documento HTML. 

Las unidades __em__ trabajan en función de un valor de referencia que corresponde al tamaño de fuente definido en un elemento contenedor (`div`, `section`, `footer`, etc). Los elementos que se encuentren al interior del contenedor y que se configuren con unidades __em__, establecen su tamaño a partir de dicho valor de referencia declarado.   

En los navegadores web el tamaño predeterminado de la fuente es de __16px__, por lo tanto, __1em__ equivale a __16px__, no obstante, este valor de referencia puede ser modificado y en ese caso una unidad __em__ será igual al nuevo valor definido. 

Por ejemplo, si en un `div` se configura la propiedad `font-zise` con un tamaño de __20px__, todos los elementos que estén en su interior tomarán como referencia ese valor. De esta manera, si en el `div` se tiene un elemento `p` con un tamaño de fuente igual a __3em__, el texto que se incluya en `p` tendrá un tamaño de __60px__, es decir, tres veces el tamaño de referencia *(3 X 20 = 60px)*. 

```CSS
div {
  font-size: 20px;   /* Tamaño de referencia (contenedor).*/ 
}
    
p {
 font-size: 3em;     /* Tres veces el tamaño de referencia (60px).*/
} 
```
En cada elemento contenedor del documento HTML se puede definir un valor de referencia diferente, lo que daría como resultado distintos tamaños de fuente en todo el documento. 

__Unidad Relativa rem.__ Las unidades de longitud __rem__ también se utilizan para definir el tamaño de los textos que se incluyen en un documento HTML. Este tipo de unidad de medida es muy interesante porque trabaja en función de un único valor de referencia que se define en el elemento raíz del documento HTML. 

>Las unidades __rem__ dependen únicamente del valor de fuente declarado en el `body`, es decir, en el elemento raíz que contiene todos los elementos del documento HTML.

Por ejemplo, si en el `body` se define el tamaño de fuente igual a __15px__, todos los elementos que estén en su interior y se configuren con unidades de longitud __rem__, van a calcular su tamaño a partir del valor de referencia, así, si el tamaño de un texto se establece en __2rem__, su dimensión será igual a __30px__ *(2 X 15 = 30px)*. En este ejemplo __1rem__ es igual a __15px__. En caso de que no se especifique un tamaño de fuente en el `body`, el valor que se usará como referencia es el tamaño predeterminado que manejan los navegadores web que es de __16px__. 

```CSS
body {
 font-size: 15px;     /* Tamaño de referencia (contenedor).*/ 
}
    
p {
 font-size: 2rem;     /* Dos veces el tamaño de referencia (30px).*/
} 

div{
 font-size: 1rem;     /* El mismo tamaño de referencia (15px).*/
}
```
Una ventaja importante al trabajar con unidades __rem__, es que estas permiten controlar fácilmente los cambios que se quieran hacer en el tamaño de los elementos de todo el documento HTML. Por ejemplo, para cambiar el tamaño de todos los textos del documento, solo se necesita modificar el valor de referencia, es decir, el tamaño que se haya configurado en la propiedad `font-size` del `body`. Los demás elementos que estén configurados con unidades __rem__, automáticamente van a ajustar su tamaño según el factor de escala declarado a través de estas unidades. 

Finalmente, se podría decir que las unidades de longitud CSS se deben utilizar teniendo en cuenta las necesidades especificas del proyecto, no obstante, se recomienda trabajar con unidades relativas, teniendo en cuenta que estas permiten mayor flexibilidad y son más apropiadas para la creación de sitios web adaptables.