Las unidades CSS son la base del diseño web moderno. Determinan cómo se establece la longitud de propiedades como margin, padding, width o font-size. Comprenderlas es clave para crear interfaces consistentes y adaptables a cualquier dispositivo.
Índice
Tipos de unidades CSS
Las unidades en CSS se dividen en dos grandes categorías: absolutas y relativas. Esta distinción es importante porque afecta cómo se renderizan los elementos en distintos dispositivos y resoluciones.
| Tipo | Unidad | Descripción |
|---|---|---|
| Absoluta | px | Píxeles |
| Absoluta | cm / mm | Centímetros / milímetros |
| Absoluta | in | Pulgadas (1in = 96px) |
| Relativa | em | A la fuente del elemento |
| Relativa | rem | A la fuente del root (html) |
| Relativa | vw / vh | 1% del ancho / alto del viewport |
| Relativa | vmin / vmax | 1% de la dimensión menor / mayor |
| Relativa | % | A un valor del elemento padre |
Unidades absolutas
Las unidades absolutas como px, cm o in representan tamaños fijos. Son predecibles, pero no escalan bien en pantallas con distintas resoluciones.
- px: La más utilizada. Útil para interfaces pixel-perfect.
- cm / mm / in: Menos comunes, se usan en contextos impresos.
- pt / pc: Usadas en tipografía tradicional, raras en web.
Unidades relativas
Estas unidades dependen del contexto: del elemento padre, del root, o del viewport. Son esenciales para diseños adaptativos y accesibles.
- em: Escala con la fuente del elemento padre. Ideal para componentes reutilizables.
- rem: Escala con la fuente del
<html>. Aporta consistencia global. - vw / vh: Basadas en el tamaño de la ventana. Perfectas para layout fluidos.
- %: Escala con el tamaño del contenedor. Útil para layouts flexibles.
Ejemplo práctico:
html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* 32px */
}
p {
font-size: 1em; /* heredará del padre */
}
¿Cuándo usar cada tipo?
No hay una única respuesta correcta, pero sí buenas prácticas:
- Para textos escalables: rem
- Para layouts responsive: vw / %
- Para componentes autónomos: em
- Evita px en tipografía si buscas accesibilidad
Conclusiones
Dominar las unidades CSS es imprescindible para lograr diseños consistentes, accesibles y responsivos. Al comprender cómo y cuándo aplicar cada tipo, se mejora no solo la apariencia, sino también la experiencia de usuario y la mantenibilidad del código.
Deja una respuesta