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.
Medidas absolutas
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.
Medidas relativas
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:
Tipografías
- em – Relativo al tamaño de la letra del elemento.
- rem – Relativo al tamaño de la letra del elemento raíz: root.
- ex – Relativo a la x de la fuente tipográfica.
- ch – Relativo al 0 (cero).
Ventana o pantalla de visualización
- Ventana o pantalla de visualización vw – Relativo al ancho de la pantalla.
- vh – Relativo a la altura de la pantalla.
- vmin – Toma como referencia el menor valor existente entre vw y vh.
- 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 a 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. |
| 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!
