Responsive Design
El enfoque de diseño web que hace que las páginas se adapten automáticamente a diferentes tamaños de pantalla usando media queries y layouts flexibles.
El Responsive Design (diseño responsivo) es la práctica de crear sitios web que se adaptan a cualquier tamaño de pantalla — desde teléfonos hasta monitores ultrawide — usando técnicas como:
- Media queries: aplicar estilos condicionales según el ancho de pantalla
- Layouts flexibles: Flexbox y Grid en vez de tamaños fijos en píxeles
- Unidades relativas:
rem,em,%,vw,vhen vez depx - Imágenes flexibles:
max-width: 100%para que no desborden
/* Mobile first */
.contenedor { padding: 16px; }
/* Tablet y arriba */
@media (min-width: 768px) {
.contenedor { padding: 32px; display: grid; grid-template-columns: 1fr 1fr; }
}
/* Desktop y arriba */
@media (min-width: 1024px) {
.contenedor { max-width: 1200px; margin: 0 auto; }
}El enfoque mobile first (móvil primero) significa escribir los estilos base para pantallas pequeñas y agregar complejidad con media queries de min-width.