Imagina que quieres que un elemento ocupe la mitad del ancho de la pantalla. Si sabes que el monitor mide 1920px, calculas la mitad: 960px. Perfecto.
Pero un segundo después alguien abre tu página en un móvil de 390px de ancho. Tu elemento de 960px desborda la pantalla. El diseño se rompe.
Aquí está el secreto que lo cambia todo: no todos tus tamaños tienen que ser fijos. Los porcentajes te permiten definir tamaños relativos al espacio disponible.
En lugar de decir "ocupa 960 píxeles", dices "ocupa el 50% del ancho disponible". No importa si eso son 960px, 195px o 1920px — siempre será la mitad exacta:
En una pantalla de 1920px → 960px. En un móvil de 390px → 195px. El elemento se adapta automáticamente. Eso es diseño responsivo en su forma más básica.
Aquí viene el matiz que debes tener claro: los porcentajes siempre son relativos al elemento padre, no a la pantalla completa.
Si un elemento está dentro de otro, el 50% no es el 50% de la pantalla — es el 50% del padre:
Si la pantalla mide 1920px:
.mi-caja ocupa el 50% de la pantalla → 960px.mi-cajita ocupa el 50% de .mi-caja → 480pxLos porcentajes se calculan siempre mirando a su padre directo, no al abuelo ni a la pantalla. Eso te da control preciso y predecible sobre cada nivel de tu estructura.
Si .mi-caja no tuviera width definido, sería un elemento de bloque que ocupa todo el ancho disponible. En ese caso, el 50% de .mi-cajita sería igual al 50% de la pantalla.
Haz que el elemento con clase .mi-elemento ocupe un 80% del ancho disponible.
Construir para todas las pantallas — esa es la verdadera habilidad del desarrollador web...