px, %, em, rem … ¿qué unidad de medida usar en CSS?

En CSS puedes ajustar el tamaño de tus textos y elementos con diferentes unidades. Hay varios pero los más conocidos son seguramente el píxel (px) y el porcentaje (%).

De hecho, estas dos unidades son prácticas porque cada una cumple una funcionalidad por su naturaleza. El píxel es una unidad absoluta relacionada con el tamaño y resolución de la pantalla que permite una visualización clara en cada pantalla, mientras que el porcentaje es una unidad relacionada con un elemento HTML que permite definir un tamaño de acuerdo con el del elemento HTML padre.

Sin embargo, existen otras unidades que tienen cada una su propia particularidad y algunas tienen una utilidad específica. A través de esto, veremos las unidades existentes en CSS y que tienen un uso específico.

Unidades de medida que se deben evitar para una pantalla de ordenador

Entre las unidades de diferentes tamaños, hay unidades que no se recomiendan para su visualización en una pantalla de computadora. Sin embargo, puede utilizar estas unidades para soportes de alta resolución o para soportes de impresión.

Estas unidades son: pt, cm, mm, in y pc que representan respectivamente el “punto”, el “milímetro”, el “centímetro”, la “pulgada” y la “pica”.

El pixel

El píxel, como se ve en la introducción de este artículo, es una unidad relacionada con la resolución y el tamaño de la pantalla en la que se muestra.

Esta unidad considerada “mágica” permite una visualización nítida y visible, incluso si es pequeña, en cualquier medio.

El porcentaje

Esta unidad denominada “%” se relaciona con su elemento principal. Un elemento con un tamaño de “50%” y que tiene un elemento padre con un tamaño de 50px tendrá entonces un tamaño de 25px.

El porcentaje se utilizará cada vez que desee definir un tamaño de acuerdo con su elemento principal.

Los em

La “em” corresponde al tamaño de fuente del elemento actual y si este tamaño no se redefine, este tamaño corresponderá al tamaño de fuente del elemento principal. Por ejemplo, si el tamaño de la fuente se establece en 20 px, entonces 1em será igual a 20 px.

Esta unidad te permitirá definir los “paddings” interiores o “márgenes” exteriores que irán vinculados al tamaño del texto y así redimensionarlos según este último en diferentes soportes.

Entonces, en una pantalla grande, los márgenes serán más grandes al igual que el tamaño del texto y, a la inversa, en una pantalla pequeña (como la pantalla de un teléfono inteligente) los textos serán más pequeños y los márgenes también.

A menudo encontrará las declaraciones “margin: 1em” y “text-indent: 1.5em” en CSS.

La ex

La unidad “ex” es una unidad que se usa con poca frecuencia y que le permite expresar tamaños en relación con la altura x de la fuente. La altura x es la altura de las letras más pequeñas (minúsculas) de una fuente.

El rem

La unidad “rem” que significa “raíz em” utiliza el principio de la unidad “em”, es decir, correspondiente al tamaño de fuente de un elemento y este elemento es el elemento raíz del documento (raíz).

Así el “rem” permite definir un valor constante en todo el documento igual al tamaño de la fuente del elemento raíz.

Esta unidad se puede utilizar para crear elementos y propiedades CSS sensibles, ya que se adaptará al tamaño de fuente del medio de visualización.

El vw y vh

Las unidades “vw” y “vh” son similares porque corresponden a la ventana gráfica de la ventana.

“Vw” será el ancho de la ventana, mientras que “vh” se referirá a la altura de la ventana.

“Vw” corresponde entonces a 1/100 o 1% del ancho de la ventana y lo mismo para “vh” que es equivalente a 1/100 o 1% de la altura de la ventana.

Gracias a estas dos unidades, podrá definir tamaños relativos al tamaño de la ventana gráfica de su medio de visualización y así crear fácilmente elementos receptivos o, por ejemplo, un elemento que ocupará todo el ancho de la pantalla.

Vmin y vmax

Las unidades “vmin” y “vmax” equivalen a 1/100 de la dimensión más pequeña y 1/100 de la dimensión grande de la ventana gráfica, respectivamente.

Los elementos con unidad “vmin” se adaptarán según la altura de la ventana mientras que los elementos con unidad “vmax” se adaptarán según el ancho de la ventana.

Para una ventana gráfica con las siguientes dimensiones: 2000px de ancho y 1000px de alto, un valor de “1vmin” será igual a “10px” y un valor de “1vmax” será igual a “20px”.

Conclusión

Hay muchas unidades de tamaño en CSS, algunas solo se usarán para algunos casos especiales como pt, cm, mm, in y pc y otras se usarán según sea necesario. Sin embargo, las unidades relativas son a menudo más apreciadas por su lado “adaptable” y las unidades “rem”, “vh” y “vw” se utilizan cada vez más por su simplicidad y eficiencia de gestión multimedia.

Usar las unidades adecuadas es un capítulo complejo en el aprendizaje de CSS.