Lupita Code 🌄

Posted on Sep 8, 2021 • Updated on Oct 16

Unidades de Medida en CSS: Fundamentos

#css #spanish

¡Hola gente bonita!👋

Al escribir CSS hay muchas opciones para las unidades que puedes usar. En este articulo voy a mostrar un resumen de todas las unidades de medida en CSS.

Pero antes de eso, ¿sabias que en CSS también hay tipos de datos?, las unidades de medida en CSS también son un tipo de dato, ¡Vamos averiguarlo!

🔢 Tipos de Datos

En CSS también existen tipos de datos. Los tipos de datos básicamente son el valor que le asignamos a cualquier propiedad. Los términos son básicamente intercambiables: cuando veas algo en CSS denominado ‘tipo de datos’, en realidad es solo una forma elegante de decir ‘valor’.

NOTA: En las especificaciones de CSS y en la documentación de la MDN, podrás detectar los valores porque estarán escritos entre corchetes angulares, como <color> o <length> para diferenciarlos de las propiedades, pero esto solo es una notación que utiliza la documentación.

Estos valores (data types) pueden ser de diferentes tipos, por ejemplo las unidades CSS son un tipo de dato y las palabras clave o keywords como el color, “auto”, url, etc.

Algunas propiedades CSS, como por ejemplo width, margin, font-size reciben valores de longitud (px, em, rem, etc..). Este tipo de dato, como lo resalta la documentación de la MDN, denota medidas de distancia y sirven para expresar una dimensión.

Si se adjunta una unidad a un número, éste se convierte en una dimensión. Por ejemplo, 1rem es una dimensión. En este contexto, la unidad que se adjunta a un número se denomina en las especificaciones token de dimensión. Las longitudes son dimensiones que se refieren a la distancia.

Hay dos tipos de unidades de longitud: Relativas y Absolutas.

📏 Unidades Absolutas

Las medidas absolutas se llaman así porque no cambian y siempre mantienen el mismo tamaño independientemente del tamaño del dispositivo. Las unidades absolutas son las siguientes:

Syntax	Description
cm	Centímetros
mm	Milímetros
Q	Cuartos de milímetros
in	Pulgadas
pc	Picas
pt	Puntos
px	Pixeles

⚒️ Las unidades absolutas tienen su origen en unidades físicas, como los centímetros, milímetros y las pulgadas. Es por esto que a estas unidades absolutas también se les conoce como unidades del mundo real. Ya que en el mundo real muchos de nosotros las utilizamos para medir, por ejemplo los Ingenieros, Arquitectos, los carpinteros, etc utilizan las unidades de medida.

Sin embargo en el articulo de Smashing Magazine “There Is No Such Thing As A CSS Absolute Unit” (No existe una unidad absoluta de CSS) del experto en HTML/CSS Elad Shechter, nos explica que con el paso de los años, todas las unidades absolutas en CSS han perdido su conexión con el mundo físico o el mundo real y esto es porque se ven afectadas por la densidad de las pantallas y el sistema operativo del dispositivo.

Con los píxeles también pasa esto ya que la conexión entre los píxeles físicos reales (es decir, de dispositivo) y los píxeles CSS (es decir, lógicos) casi ha desaparecido, en un momento te explicare esto.

🤔 ¿Dónde puedo usar las unidades absolutas?

Entonces, ¿en donde puedo utilizar las unidades absolutas? Las longitudes absolutas pueden ser realmente útiles cuando se diseña para formatos impresos, a excepción de los pixeles donde su uso es mas frecuente en pantallas.

Ten en cuenta que el CSS se utiliza no sólo para el contenido digital, sino también para dar estilo al contenido impreso, Por ejemplo, si usas cm para el tamaño de un elemento y luego lo imprimes, debería ser preciso si lo mides con una regla. Sin embargo en pantalla esto no es así, ya que los centímetros en pantalla no son igual a los centímetros físicos, ¿Cómo es esto posible? 😱

👉 Si creas una caja con un ancho y un alto de 1 centímetro y le das un color de fondo y después mides el elemento con una cinta métrica real o una regla 📏, vas a poder comprobar que un centímetro en pantalla no es igual a uno físico. Aquí puedes ver la imagen de este ejemplo (Crédito de la imagen: Elad Shechter)

🖨️ Pero si imprimes esta demostración en una impresora láser si vas a obtener exactamente 1 centímetro, esto significa que, para las impresoras, todavía hay, tal vez, una buena razón para usar unidades CSS como puntos, pulgadas y centímetros.

✅ Sin embargo el único valor absoluto que usaras de forma frecuente es px (pixeles). Los pixeles son la unidad CSS mas popular y conocida. La vamos a conocer a detalle en el siguiente articulo especialmente dedicado a esta unidad absoluta.

📏 Unidades Relativas

Las medidas relativas son relativas a algo mas, pero ¿relativo a que? O ¿respecto a que?, por ejemplo, relativo al font-size de un elemento padre, al ancho/altura de un contenedor padre, o al ancho/altura del viewport.

✅ La ventaja de usar unidades relativas es que puedes lograr que el tamaño del texto u otros elementos escalen proporcionalmente en relacion con todo lo demás en la pagina. Las unidades relativas son las que se recomienda utilizar sobre todo para Responsive Web Design (RWD).

Las unidades relativas se pueden dividir en dos categorías:

Unidades relativas al tamaño de la fuente.
Unidades relativas al viewport.

Unidades relativas al tamaño de la fuente

rem: Siempre es relativa al tamaño de fuente del elemento raíz que es html. Por defecto, la etiqueta html tiene un tamaño de fuente de 16px, por lo que 1rem será igual a 16px. La mayoría de los navegadores tiene un estándar en que el tamaño base de la fuente que asignan al texto que vemos en un documento HTML sea de 16px (excluyendo los encabezados y el elemento small, entre otros).

em: Las unidades em para la propiedad font-size serán relativas al font-size del elemento padre. Las unidades em en otras propiedades que no sean font-size serán relativas al font-size del elemento actual.

ex: Basada en la altura de la “x” minúscula de la fuente del elemento (depende de la tipografía utilizada). La unidad ex es la mitad del tamaño de la fuente establecida por el navegador del usuario que por lo regular es 16px = 1em, entonces la mitad de 16px es 8, por lo que 8/16 = 0.5, por lo que 1ex es igual a .5em.

cap: Basada en la altura de las letras mayúsculas de la fuente actual del elemento.

ch: Basada en la anchura del glifo “0” de la letra del elemento.

ic: Es una medida nueva que tiene que ver con la anchura de los glifos. Para mas información puede consultar la especificación de la w3c.

lh: Altura de linea del elemento.

rlh: Altura de linea del elemento raíz (html).

Te recomiendo leer mi articulo mas completo sobre las unidades em y rem, donde explico cuando y como usar estas unidades y la diferencia entre ambas:

EM VS REM: ¿Cuál debería usar? | Medium

Lupita Code 🌄 ・ Sep 30, 2023 ・
lupitacode.Medium

Unidades relativas al viewport

vw (Viewport width) Relativo al ancho del viewport los valores van de 1-100.

vh (Viewport height) Relativo a la altura del viewport los valores van de 1-100.

vmax Entre vw y vh toma el que tenga el mayor valor.

vmin Entre vw y vh toma el que tenga el menor valor.

NOTA: Las unidades del viewport tendrán su propio articulo detallado.

Porcentajes %

Cuando especificamos un porcentaje como data type o valor en un elemento, este se calcula en base en la medida del elemento padre, para que esto funcione, la medida en el elemento padre debe estar especificada.

Te recomiendo leer mi articulo sobre los porcentajes donde explico lo siguiente:

✅ width:auto vs. width:100%
✅ height:auto vs. height:100%
✅ html, body { height: 100%}
✅ Porcentajes en la propiedad font-size