Unidades de medida en CSS: longitud, ángulo, duración frecuencia y resolución

Unidades de medida en CSS: longitud, ángulo, duración, frecuencia y resolución

5 de junio 2020

Maquetar una página web es parecido a construir la estructura de un edificio. Partiendo de un diseño y utilizando diferentes elementos se arma una estructura que contendrá todo el contenido al que vaya destinado. Como supondrás, para evitar problemas es necesario prestar especial atención a las dimensiones de la composición y para ello se usan diferentes unidades de medidas.

Cuando hacemos el desarrollo de una página web y utilizamos CSS, sucede lo mismo que comentaba antes, es necesario utilizar unidades de medida si queremos lograr exactitud en la composición. Sin embargo, en el entorno digital encontramos toda una colección de medidas diferentes a las que conocemos habitualmente y que son necesarias manejar cuando realizamos desarrollos web complejos.

A continuación vamos a hacer un repaso completo de todas las unidades de medida que podemos utilizar en CSS, agrupadas según la dimensión para la que se usan: longitud, ángulo, duración, frecuencia y resolución.

Unidades de longitud absolutas

Las unidades de longitud absolutas son aquellas cuyo tamaño permanece inalterable con independencia del soporte en el que se visualice. Eso sí, hay que aclarar que si la salida es un monitor, su representación depende de la resolución del mismo. Quiero decir, no vayas a usar un metro para comprobar si en pantalla mide lo mismo que te veo venir.

px

El píxel es la unidad de longitud digital por antonomasia, basada en el ángulo de visión de la pantalla, la distancia de la misma y la densidad de puntos por pulgadas. A una resolución de 96dpi y una distancia de 28 pulgadas, 1px equivale a 1/96 pulgadas, aproximadamente 0.26 milímetros.

in

La pulgada es una medida de longitud del sistema inglés. Se trata de una traslación del mundo real al digital. 1in equivale a 96px y a 2.54cm.

cm

Perteneciente al sistema Métrico, los centímetros son también una traslación de una unidad de medida del mundo real al digital. 1cm equivale a 37.8px y a 0.39in.

mm

Milímetros es de nuevo una unidad del sistema Métrico y 1mm es una décima parte de 1cm.

Q

Esta unidad son cuartos de milímetros, de este modo 1Q representa sin lugar a mucha fantasía 1/4 de 1mm. O si lo preferimos también puede ser 1/40 de 1cm.

pt

Puntos es una medida tipográfica en la que 1pt equivale a 1/72 de 1in.

pc

Picas también es una medida tipográfica usada en determinados países. 1pc equivale a 12pt.

Unidades de longitud relativas

Las unidades de longitud relativas en CSS son aquellas que basan su escala en otra longitud de la que son dependientes. Es decir, en lugar de tener un tamaño fijo y universal como en las absolutas, éste varía dependiendo de cuál sea la referencia en la que nos estamos basando.

% (porcentaje)

No hace falta presentaciones, con esta unidad indicaremos un porcentaje relativo al elemento padre, de este modo si a un div que se encuentra dentro de otro que mide 200px le asignamos un ancho de 50%, ocupará la mitad, es decir 100px.

em

Esta unidad se basa en el tamaño de fuente del elemento en el que nos encontramos. De modo que si definimos la propiedad font-size de un párrafo a 1rem, equivaldrá al que tenga su contenedor, si éste tiene 14px será ese tamaño, si no, será el del elemento padre y así sucesivamente hasta la raíz del documento.

ex

Se trata de una unidad relativa a la altura de la letra “x” (equis) en minúsculas de la primera fuente disponible.

ch

Usa como referencia el ancho del número “0” (cero)

rem

La unidad rem toma como referencia el tamaño de fuente de la raíz del documento. Por defecto los navegadores actuales lo definen en 16px, de modo que si no hemos configurado algo diferente, 1rem equivaldría a ese tamaño.

vw

En esta ocasión usamos como referencia el ancho de la ventana del navegador (viewport width) y podremos establecer un porcentaje respecto a ésta. Suponiendo que el ancho de la ventana fuera 100cm, si usamos 1vw equivaldría a 1cm.

vh

Funciona como en el caso anterior pero usando en esta ocasión el alto de la ventana del navegador (viewport height).

vmin

Esta unidad se define dinámicamente respecto a la venta del navegador y adopta como referencia la longitud del eje que es menor. Es decir, si la anchura del navegador es menor que su altura, vmin será equivalente a vw. Si la altura fuera menor que la anchura, vmin sería entonces como vh.

vmax

Opera como en el caso anterior, pero al revés, adopta como referencia la longitud del eje que es mayor. Si la anchura del navegador es mayor que su altura, vmax será equivalente a vw. Si la altura fuera mayor que la anchura, vmax sería entonces como vh.

Unidades de ángulo

Estas unidades se usan en CSS principalmente para rotar un objeto utilizando grados. Dependiendo del tipo de grado que usemos, la circunferencia en la que nos basamos será diferente.

deg

Esta unidad se usa para emplear grados sexagesimales. Al usar los grados de este tipo, la circunferencia que usaremos tendrá 360º. De modo que 90deg equivaldría a un ángulo recto.

grad

En cambio, esta otra unidad se usa para definir grados centesimales. En este caso la circunferencia contará de 400º y por tanto 100grad será un ángulo recto.

rad

Un radián es el resultado de tomar el radio de una circunferencia y usar esa distancia para definir el arco de ese ángulo. Un círculo estaría compuesto por 2π rad. Un ángulo recto en este caso sería 1.57rad.

turn

Es una vuelta completa a un círculo, por lo que 1turn equivaldría a una vuelta y siguiendo los ejemplos anteriores 0.25turn equivale a un ángulo recto.

Unidades de duración

Se usan para establecer la duración de un evento determinado. Si estamos haciendo una animación de un objeto, con estas unidades podremos indicar el tiempo en el que se debe desarrollar la transformación.

s

Con esta unidad expresamos segundos. Sin descubrir aquí la rueda, 60s sería un minuto.

ms

Con esta otra nos referiremos a milisegundos. Así pues 1000ms equivale a 1s.

Unidades de frecuencia

Las unidades de frecuencia se utilizan para indicar el número de veces que ocurre una cosa en un determinado lapso de tiempo. Sirve para la maquetación auditiva CSS de una web cuando trabajamos por ejemplo con diferentes pistas de audio.

Hz

Los hercios se usan para representar el número de ciclos por segundo. En física sería el número de veces que se repite una onda por segundo.

kHz

Disponemos también como unidad los kilohercios, dando como resultado que 1kHz son 1Hz.

Unidades de resolución

Las siguientes unidades representarán la densidad de puntos que contendrá un área específica. Es decir, estamos hablando de unidades que nos permitirá definir propiedades dependiendo de la resolución del soporte en el que se visualicen. Lo habitual será usarlas dentro de media queries.

dpi

Puntos por pulgada. En el caso de las pantallas se suele usar 72 ó 96dpi y en el caso de impresión se suele usar una densidad mayor. 1dpi sería lo mismo que 0.39dpcm.

dpcm

Puntos por centímetro. 1dpcm en este caso sería 2.54dpi.

dppx

Puntos por píxel. 1dppx equivale a 96dpi en una resolución por defecto de esa misma densidad.

Si tenéis interés en ampliar información sobre este tema, podéis consultar la documentación de la W3C sobre las unidades de medida en CSS.

Publicado por Jesús Tovar

Categorías: CSS, Diseño

Etiquetas: ,

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *