Flujo y límites
Usa dimensiones relativas, max-width y minmax. El texto largo no debería estirar la página.
APRENDER ES PONER A PRUEBA
El contenido cambia de espacio.
Prueba una misma composición con anchos distintos. Un diseño adaptable combina flujo, límites y puntos de cambio elegidos por contenido.
Móvil, tablet y escritorio.
El marco conserva el ancho elegido y permite desplazamiento dentro de la muestra si tu pantalla es más pequeña. No simula hardware, zoom real ni lector de pantalla.
Leer el código del ejemplo
* { box-sizing: border-box; }
body { font-family: system-ui; margin: 0; color: #18213a; }
header, main, footer { padding: 24px; }
header { display: flex; justify-content: space-between; gap: 16px; background: #eef1ff; }
nav { display: flex; gap: 12px; flex-wrap: wrap; }
h1 { font-size: clamp(28px, 5vw, 48px); }
section { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
article { padding: 20px; border: 1px solid #dde3ef; border-radius: 12px; }
@media (max-width: 700px) { section { grid-template-columns: 1fr; } header { flex-direction: column; } }<header><strong>Estudio Claro</strong><nav><a href="#servicios">Servicios</a><a href="#contacto">Contacto</a></nav></header><main><h1>Un diseño que se adapta.</h1><p>El contenido determina el punto de cambio.</p><section id="servicios"><article><h2>Estructura</h2><p>Contenido con significado.</p></article><article><h2>Diseño</h2><p>Espacio y jerarquía.</p></article><article><h2>Interacción</h2><p>Acciones claras.</p></article></section></main><footer id="contacto">Un ejemplo adaptable.</footer>
* { box-sizing: border-box; }
body { font-family: system-ui; margin: 0; color: #18213a; }
header, main, footer { padding: 24px; }
header { display: flex; justify-content: space-between; gap: 16px; background: #eef1ff; }
nav { display: flex; gap: 12px; flex-wrap: wrap; }
h1 { font-size: clamp(28px, 5vw, 48px); }
section { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
article { padding: 20px; border: 1px solid #dde3ef; border-radius: 12px; }
@media (max-width: 700px) { section { grid-template-columns: 1fr; } header { flex-direction: column; } }
No compruebes solo tres capturas.
Prueba también anchos intermedios, contenido largo, teclado y ampliación.
Breakpoints
Cambia la distribución cuando el contenido deja de funcionar; no porque un modelo de teléfono tenga cierto ancho.
Orden de lectura
La distribución visual debe mantener un recorrido lógico. Evita reordenar contenido esencial de forma distinta al DOM.
Reconoce el desbordamiento.
Un ancho fijo puede causar desplazamiento horizontal aunque la página tenga una media query.
.contenido { width: 900px; } /* Problema en móvil */
.contenido {
width: min(100%, 900px);
min-width: 0;
} /* Un punto de partida más flexible */Una tabla, un diagrama o un bloque de código pueden necesitar desplazamiento interno. Eso no significa que toda la página deba desbordarse.