Las unidades de medida en CSS son muchas y se representan mediante un número seguido de su unidad de medida (sin espacios). Normalmente las vemos y usamos a menudo en el modelo de cajas, pero lo cierto es que están presentes en prácticamente todo el proyecto CSS. Por lo que las veremos en propiedades como font-size, margin, padding, etc.

Al ser tantas con las que trabajar, podemos distribuirlos en dos grandes grupos: medidas absolutas y medidas relativas.

Las medidas absolutas son las medidas físicas (cm, in, mm, pc, pt) y la unidad px. Estas unidades aparecerán exactamente en el tamaño que se les dé, lo que significa que su valor es el que se define sin depender de otro como referencia. Por esta razón no se recomienda usar para pantalla sino para impresión ya que los medios impresos, por lo general, están medidos en esas unidades.

Para que te hagas una idea, la relación entre las medidas absolutas físicas es la siguiente:
1in = 2.54cm = 25.4mm = 72pt = 6pc

Por otro lado y dentro de este mismo grupo de medidas absolutas, contamos con la unidad px, o lo que es lo mismo, píxel como todos conocemos. Un píxel CSS es igual a un píxel del dispositivo, o lo que lo mismo, un punto de la pantalla.

Las medidas relativas como su propio nombre indica, son relativas a otro valor y se expresan en porcentaje ya que son escalables respecto a su valor referencial. Su ventaja es que siempre van a mantener las proporciones del diseño de la página por lo tanto son las recomendadas para trabajar en pantalla.

Estos valores de referencia de los que dependen son dos:

  1. Tipografía
    1. em – Relativo al tamaño de la letra del elemento.
    2. rem – Relativo al tamaño de la letra del elemento raíz: root.
    3. ex – Relativo a la x de la fuente tipográfica.
    4. ch – Relativo al 0 (cero).
  2. Ventana o pantalla de visualización
    1. vw – Relativo al ancho de la pantalla.
    2. vh – Relativo a la altura de la pantalla.
    3. vmin – Toma como referencia el menor valor existente entre vw y vh.
    4. vmax– Toma como referencia el mayor valor existente entre vw y vh.

Aquí te lo explico más detenidamente.

Medidas absolutas

Medidas relativas

px

píxel

Aunque es una medida absoluta, realmente es relativa al dispositivo de visualización (ya sea impreso o pantalla)

1px CSS = 1 punto de la pantalla

El píxel se usa cuando se quiere tener un mayor control de las dimensiones pero no es la mejor opción cuando se trata de páginas web que se adaptan a cualquier dispositivo (responsive) ya que el resultado será idéntico en todas las pantallas sea del tamaño que sea.

em

Relativa al tamaño de letra del elemento padre. Si ese elemento no tiene una font-size definida, la hereda del padre, abuelo, etc hasta llegar al html o raíz (:root).

1em será igual al valor de la propiedad font-size que se esté utilizando por defecto, que sin cambio en el documento CSS:

1em = 16px

.container { font-size: 1.3em; } = .container { font-size: 20.8px; }

mm

milímetro

rem

Root em

Relativa al tamaño de letra del html o raíz (:root).

Como por defecto, un documento HTML tiene un tamaño de letra de 16px, 1rem siempre será igual a 16px a no ser que lo modifiquemos en el elemento raíz.

cm

centímetro

1cm = 10mm = 37.8px

ex

Relativa la altura de la x de la fuente.

1ex = 0.5em

A diferencia de la unidad em, la unidad ex cambia su valor si se cambia la familia tipográfica.

Aquí la prueba

in

pulgada

1in = 2.54cm = 96px

ch

Relativa al 0 (cero)

Funciona igual que la unidad ex con la diferencia del glifo al que hace referencia. Además, también cambia su tamaño si se cambia a su vez la familia tipográfica.

pt

punto

1pt = 1/72in

Esta medida se suele usar para impresión.

vw

viewport width

Relativa al ancho de la pantalla.

1vw = 1% del ancho de la pantalla.

pc

pica

1pc = 12pt

vh

viewport height

Relativa a la altura de la pantalla.

1vh = 1% de la altura de la pantalla.

vmin

Toma como referencia el menor valor existente entre vw y vh.

1vmin = 1% del menor valor de la pantalla (ya sea vw o vh)

vmax

Toma como referencia el mayor valor existente entre vw y vh.

1vmax = 1% del mayor valor de la pantalla (ya sea vw o vh)

%

porcentaje

Relativo a la medida de la misma propiedad de su elemento padre.

Por ejemplo, si un elemento tiene un ancho width: 1200px; y su hijo tiene un width: 50%; el valor será igual a la mitad de 1200px.

Para concluir, y como te comentaba al principio del post, las medidas relativas son las adecuadas para trabajar en pantalla por ser escalables y flexibles. Ten en cuenta que hoy en día el factor fundamental de un proyecto web es que se adapte a cualquier dispositivo (que sea responsive). El hecho de usar una medida u otra ya depende de ti, con la que te sientas más cómodo y por supuesto, la que mejor se adapte al tipo de proyecto en el que estás trabajando.

¡Que pases un buen día!

Hacer Comentario

Su dirección de correo electrónico no será publicada.