Apuntes css

¿Para qué quieres herencias cuando tienes !important?

Unidades y medidas en CSS

En CSS, muchas propiedades (como font-size, margin o width) necesitan un valor numérico con una unidad, como píxeles (px), centímetros (cm) o porcentajes (%). Estas unidades pueden ser absolutas (fijas, como cm) o relativas (dependen del contexto, como el tamaño de la fuente o de la ventana). Elegir la unidad correcta es clave para que el diseño sea preciso y se adapte a diferentes pantallas.

Nota: En este texto, usamos "diseño adaptable" para referirnos a un diseño web que se ajusta fluidamente a cualquier tamaño de pantalla, como en el responsive design en inglés.

Tipos de unidades

Las unidades se dividen en dos grandes grupos: absolutas y relativas. Además, los porcentajes son un caso especial.

Unidades absolutas

Estas unidades tienen un tamaño fijo, independientemente del contexto. Son útiles cuando necesitas medidas exactas, como en impresión, pero menos flexibles para pantallas.

  • in (pulgadas): 1in = 2.54cm.
  • cm (centímetros).
  • mm (milímetros): 1cm = 10mm.
  • pt (puntos): 1pt = 1/72 de pulgada.
  • pc (picas): 1pc = 12pt.
p {
    font-size: 12pt; /* 12 puntos */
    margin: 1cm; /* 1 centímetro */
}

Nota: Las unidades absolutas son precisas, pero no se adaptan bien a diferentes dispositivos. Por ejemplo, 1in podría verse más pequeño o más grande en pantallas de alta densidad, porque los navegadores traducen pulgadas a píxeles según una escala fija (96px = 1in), no física.

Unidades relativas

Estas unidades dependen de algo, como el tamaño de la fuente, el contenedor o la ventana del navegador. Son ideales para diseños adaptables.

em: Relativo al font-size del elemento (o del padre, cuando se usa en font-size).

body { font-size: 16px; }
p { text-indent: 2em; } /* 32px */
div { font-size: 1.5em; } /* 24px */

Nota: Cuando se encadenan varios niveles con em, el tamaño se multiplica. Por ejemplo, si un div tiene font-size: 1.2em y dentro hay un p con font-size: 1.2em, el resultado final es 1.44em respecto al html.

rem: Relativo al font-size del elemento raíz (<html>).

html { font-size: 16px; }
p { font-size: 1.5rem; } /* 24px */

ex: Relativo a la altura de la "x" minúscula de la fuente. Se usa raramente.

p { line-height: 2ex; }

px: Píxel lógico, definido como 1/96 de pulgada. Aunque se comporta como una unidad fija, en realidad es relativo a la densidad de píxeles del dispositivo.

h1 { font-size: 24px; }

vw, vh, vmin, vmax: Unidades relativas al tamaño de la ventana.

  • vw: 1% del ancho de la ventana.
  • vh: 1% del alto de la ventana.
  • vmin: 1% del menor entre ancho y alto.
  • vmax: 1% del mayor entre ancho y alto.
h1 { font-size: 5vw; }

Nota: En móviles, vh puede provocar saltos o scroll inesperado cuando aparece o desaparece la barra del navegador. En navegadores modernos, existen unidades como dvh (dynamic viewport height) que corrigen este comportamiento.

ch: Basado en el ancho del carácter "0" de la fuente.

p { width: 50ch; }

lh: Relativo al line-height del elemento.

p { line-height: 1.5; margin-top: 1lh; }

Consejo: Usa rem o em para diseños que respeten las preferencias de tamaño de fuente del usuario. vw y vh son útiles, pero requieren cuidado en móviles.

Unidades de porcentaje

Los porcentajes (%) son relativos a otro valor, como el font-size del padre, el ancho del contenedor o el valor heredado.

body { font-size: 16px; }
p { font-size: 150%; }
div { width: 50%; }

Nota: Los porcentajes son versátiles, pero asegúrate de entender a qué son relativos para evitar sorpresas.

Funciones modernas (CSS3)

calc(): Permite hacer cálculos con unidades distintas.

p { width: calc(100% - 20px); }

min() y max(): Devuelven el valor mínimo o máximo.

h1 { font-size: min(5vw, 32px); }

clamp(min, ideal, max): Mantiene un valor dentro de un rango adaptable.

p { font-size: clamp(16px, 4vw, 18px); }

Nota: clamp() es ideal para tipografía adaptable, evitando tamaños extremos en móviles o pantallas grandes.

h1 {
    font-size: clamp(20px, 5vw, 28px);
    margin: calc(10px + 2vw);
}

¿Absolutas o relativas? ¿Cuál usar?

Unidades absolutas: Útiles en impresión o cuando se necesita precisión, pero no se adaptan bien.

Unidades relativas: Más adecuadas para pantallas y accesibilidad.

Píxeles: Son predecibles y útiles para detalles, aunque no escalables.

Porcentajes: Flexibles para layouts pero su contexto debe estar claro.

Buena práctica: Prefiere rem, em y clamp(). Evita ex salvo casos muy específicos.

Ejemplo: sangría con em

p {
    font-size: 14px;
    text-indent: 2em;
}

Ejemplo: diseño adaptable con rem y vw

html { font-size: 16px; }
h1 {
    font-size: clamp(1.5rem, 5vw, 2rem);
}
section {
    width: 90%;
    max-width: 1200px;
    margin: 2rem auto;
}

Comparación de unidades

<p style="font-size: 1rem;">Texto normal</p>
<p style="font-size: 1.5em;">1.5em (relativo al padre)</p>
<p style="font-size: 5vw;">5vw (5% del ancho de la ventana)</p>
<p style="font-size: 12pt;">12pt (fijo)</p>
<p style="font-size: 150%;">150% (relativo al padre)</p>

Buenas prácticas

Accesibilidad: Usa rem o em para que los tamaños respeten las configuraciones del usuario.

Diseño adaptable: Combina rem, vw y clamp().

Consistencia: Define un font-size base en <html> (por ejemplo, 16px) y usa rem.

Evita errores: No pongas espacios entre el número y la unidad (ej. 10px, no 10 px).

Pruebas: Visualiza los estilos en diferentes dispositivos y resoluciones.

TOP