Apuntes sobre Html2

Cuando uno enseña, dos aprenden.

Unidades de medida en CSS

CSS acepta muchos tipos de unidades para expresar tamaños, distancias e interlineados. Algunas son fijas; otras dependen del contexto. Elegir bien entre ellas es la base de un diseño flexible y accesible.

Unidades absolutas

Las unidades absolutas tienen un tamaño fijo independiente del contexto. Las más usadas en web:

  • px (píxel): la unidad más común en pantalla. Un píxel CSS equivale a 1/96 de pulgada lógica. En pantallas de alta densidad (Retina), el navegador escala automáticamente, así que 1px puede representar 2 o 3 píxeles físicos.
  • pt (punto): 1/72 de pulgada. Herencia de la tipografía impresa; se usa en hojas de estilo para impresión.
  • cm, mm, in: centímetros, milímetros, pulgadas. Solo tienen sentido real en contextos de impresión.
/* Para pantalla */
h1 { font-size: 24px; }

/* Para hoja de impresión */
@media print {
    body { font-size: 12pt; }
}

Unidades relativas: em, rem, %

Las unidades relativas se calculan a partir de algún valor de referencia. Son la base del diseño adaptable.

em: relativo al font-size del elemento. Si el elemento hereda un tamaño de fuente de 16px, 1em = 16px, 2em = 32px. Cuando se usa en font-size, es relativo al font-size del padre. El encadenamiento puede complicar los cálculos:

body { font-size: 16px; }
.caja { font-size: 1.25em; }   /* 20px */
.caja p { font-size: 1.25em; } /* 25px: 1.25 × 20px, no 1.25 × 16px */

rem (root em): relativo al font-size del elemento raíz (<html>), siempre, sin importar el anidamiento. Más predecible que em para tamaños de fuente:

html { font-size: 16px; }
h1 { font-size: 2rem; }        /* siempre 32px */
p  { font-size: 1rem; }        /* siempre 16px */
small { font-size: 0.875rem; } /* siempre 14px */

Usar rem respeta las preferencias del usuario: si el usuario configura su navegador para usar fuente de 20px, todos los rem escalan proporcionalmente. Con px fijos no ocurre esto.

%: relativo a algún valor del elemento padre. Para width y height es relativo a las dimensiones del contenedor; para font-size es relativo al tamaño de fuente del padre:

.contenedor { width: 800px; }
.hijo { width: 50%; }   /* 400px */

Nota: Existen más unidades pensadas para el diseño responsivo: vw y vh (relativas al tamaño de la ventana), y funciones como calc() y clamp() que permiten crear tamaños fluidos que se adaptan a la pantalla. Las veremos en la lección de media queries, donde tienen contexto práctico real.

Tu proyecto

Revisa estilos.css y sustituye los valores en px de tipografía por rem, y los anchos fijos por % donde tenga sentido. El resultado visual será idéntico, pero el diseño respetará las preferencias de fuente del usuario y se adaptará mejor a diferentes pantallas:

/* antes */
body { font-size: 16px; max-width: 860px; }

/* después */
body { font-size: 1rem; max-width: 90%; }

h1 { font-size: 2.5rem; }
h2 { font-size: 1.5rem; }
p  { font-size: 1rem; line-height: 1.7; }

Recapitulación

  • px es la unidad fija más habitual en pantalla. Para impresión, pt.
  • em es relativo al font-size del elemento y se acumula en anidamientos. rem es siempre relativo al font-size del <html>, más predecible. Ambos respetan las preferencias de fuente del usuario.
  • % es relativo al valor correspondiente del elemento padre.

En la próxima lección: contenedores semánticos y el modelo de flujo: <header>, <main>, <footer>, y la diferencia entre elementos de bloque e inline.

TOP