Maquetación Web Dinámica / CSS3 fundamentos: la piel
Unidades: px, %, em, rem, vw/vh, dvh y ch
CSS tiene más de 20 unidades de medida, y la pregunta "¿cuál uso?" paraliza a cualquier principiante. La buena noticia: con SEIS cubres el 99% del trabajo profesional, y cada una tiene un cuándo claro. Al final tendrás la tabla de decisión completa.
px: el ancla absoluta
El píxel es fijo: 16px mide lo mismo sin importar el contexto. Es perfecto
para lo que NO debe escalar: bordes (1px), sombras, detalles finos. Su
debilidad: si el usuario configura su navegador con fuente más grande (por
visión reducida), los px no lo respetan.
em y rem: los relativos a la fuente
1em= el font-size del elemento actual (o del padre, si se usa en font-size). Se ENCADENA: em dentro de em se multiplica.1rem= el font-size de la raíz (html, 16px por defecto). Estable, predecible, sin sorpresas.
<div class="em-chain">
Nivel 1 (1.2em)
<div class="em-chain">
Nivel 2 — me multipliqué (1.44×)
<div class="em-chain">Nivel 3 — y yo más (1.72×)</div>
</div>
</div>
<div class="rem-fixed">Con rem somos estables
<div class="rem-fixed">a cualquier profundidad</div>
</div>body { font-family: system-ui; padding: 24px; color: #1e293b; }
.em-chain { font-size: 1.2em; margin-left: 16px; }
.rem-fixed { font-size: 1.125rem; margin-left: 16px; margin-top: 8px; }%, vw/vh y dvh: los relativos al contexto
%: relativo al PADRE.width: 50%= la mitad del contenedor.vw/vh: relativo a la VENTANA (viewport).100vw= todo el ancho de la pantalla,100vh= toda la altura.dvh(dynamic viewport height): la versión corregida de vh para móviles. En celulares, la barra del navegador aparece y desaparece;100vhignora eso y provoca el clásico "hero que se corta".100dvhmide la altura REAL visible en cada momento.
ch: la unidad tipográfica secreta
1ch = el ancho del carácter "0" de la fuente actual. Su superpoder: limitar
el ancho de los párrafos en unidades de LECTURA. La tipografía recomienda
líneas de 45-75 caracteres:
La tabla de decisión
| Qué estás midiendo | Unidad |
|---|---|
| Tipografía, espaciados del sistema | rem |
| Bordes, sombras, detalles de 1-3px | px |
| Algo proporcional a su contenedor | % |
| Secciones a pantalla completa | dvh / vw |
| Ancho de texto legible | ch |
| Escalar con la fuente local | em |
Tu hero con height: 100vh se corta en celulares cuando aparece la barra del navegador. ¿La corrección moderna?
Mini-reto
En tu periódico: pon los font-size en rem, limita los párrafos de las
noticias a 65ch, y dale al header min-height: 20dvh. Luego, en DevTools,
cambia el font-size del html a 20px y mira cómo TODO escala en proporción —
eso es un sistema relativo bien montado.
Qué sigue
Cajas medidas. Ahora, el alma visual: color. La próxima lección va de hex, rgb, hsl y el moderno oklch — con el que por fin los colores "se ven como los piensas".