Unidades

px: la unidad fija

px (píxeles) es una unidad absoluta: 16px son 16px, sin importar nada más en la página. Es predecible, pero no se adapta — si un estudiante agranda el tamaño de letra de su navegador (algo que muchas personas necesitan para leer cómodo), un texto en px no cambia.

h1 { font-size: 24px; }
.caja { width: 300px; }

rem: relativa a la fuente base

rem es relativa al tamaño de fuente del documento entero (normalmente 16px por defecto en el navegador, salvo que la propia página lo cambie). Si el tamaño de fuente base es 16px, 1rem = 16px, 2rem = 32px.

p { font-size: 1rem; }   /* 16px */
h1 { font-size: 2rem; }  /* 32px */

La ventaja: si alguien agranda el tamaño de letra de su navegador, todo lo medido en rem crece con eso. Por eso rem es la opción recomendada para tamaños de fuente.

%: relativa al elemento padre

% se calcula en base al tamaño del elemento contenedor (el padre). Si un contenedor mide 800px de ancho y un elemento adentro tiene width: 50%, ese elemento mide 400px.

.contenedor {
    width: 800px;
}
.mitad {
    width: 50%; /* 400px, la mitad del contenedor */
}

Muy usada para anchos que necesitan adaptarse — si el contenedor cambia de tamaño (por ejemplo, en una pantalla más chica), el porcentaje se recalcula solo.