Un sitio responsive adapta su contenido al espacio disponible. No se trata de hacer todo más pequeño: la prioridad es mantener la navegación, la lectura y las acciones claras en cada pantalla.
1. Diseña pensando primero en el espacio
Empieza con una columna cómoda en pantallas reducidas y utiliza consultas de medios para añadir columnas cuando haya lugar. Evita fijar anchuras que superen la pantalla del teléfono.
2. Flexbox: elementos en una dirección
Flexbox facilita distribuir controles en una fila o una columna. Úsalo para menús, grupos de botones y bloques que necesiten alinearse o cambiar de dirección.
3. Grid: colecciones en varias columnas
CSS Grid es útil para tarjetas y páginas con áreas de contenido. Con repeat y minmax puedes crear columnas que aparezcan según el ancho disponible, sin inventar tamaños de dispositivo.
4. Ejemplo adaptable
Este código genera tarjetas que ocupan al menos 220 píxeles cuando es posible y pasan a una sola columna cuando falta espacio. La anchura mínima de una tarjeta se limita también al contenedor.
<div class="tarjetas">
<article>Programación</article>
<article>Redes</article>
<article>Herramientas</article>
</div>
<style>
.tarjetas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: 1rem;
}
</style>5. Comprueba el resultado
Usa las herramientas de desarrollo del navegador para simular anchos de pantalla distintos. Prueba con teclado, aumenta el zoom al 200 % y verifica que textos, botones y formularios no se recorten.
Comprueba el sitio en un teléfono real: los emuladores son muy útiles, pero no sustituyen todas las pruebas.