Diseño responsive con CSS
Flex responsive y Grid responsive mostraron trucos de layout en breakpoints. El diseño responsive es la visión global: un sitio legible en móvil, tablet y monitor ancho — sin mantener dos copias HTML. Esta lección fija hábitos; media queries, breakpoints e imágenes responsive profundizan después.
Caja de herramientas del diseño responsive
📊 Diseño responsive de un vistazo
| Pieza | Tarea habitual |
|---|---|
| Viewport meta | Indica al móvil usar el ancho del dispositivo, no una columna desktop falsa |
| Contenedor fluido | width: 100% + max-width + padding lateral — líneas legibles |
Unidades relativas (rem, %, em) |
Tipografía y espaciado que escalan con ajustes y contexto |
| Imágenes flexibles | max-width: 100% para que el medio no desborde pantallas estrechas |
| Un solo árbol HTML | Mismos landmarks; CSS mueve el layout |
| Media queries (siguiente lección) | Cambiar reglas cuando el viewport coincide |
Páginas de ancho fijo que hacen zoom o scroll horizontal en el móvil frustran. El diseño responsive acepta cualquier ancho y ajusta espacio, columnas y tipo con calma — usando Flex y Grid que ya practicaste.
Viewport meta — el móvil necesita la pista
Sin <meta name="viewport" content="width=device-width, initial-scale=1">, muchos móviles renderizan ancho desktop y lo encogen. Ponlo una vez en el <head> y estiliza con CSS.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>
Mobile-first frente a desktop-first
Mobile-first escribe estilos base para pantallas estrechas y luego añade consultas min-width en pantallas grandes. Desktop-first empieza ancho y usa max-width para apretar — como en Flex/Grid responsive. Ambos valen si cambias una capa a la vez; elige un hábito por proyecto.
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
font-size: 1rem;
padding: 1rem;
}
/* La lección Media Queries añade reglas min-width aquí */
Contenedor fluido centrado
Ancho completo con tope max-width y padding horizontal para que el contenido no roce los bordes. Funciona antes de elegir Flex o Grid para columnas.
.page-wrap {
width: 100%;
max-width: 72rem;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
Unidades relativas para tipo y espacio
rem enlaza al tamaño raíz — bueno para títulos y gaps. % encaja anchos dentro del padre. Evita fijar todo en px cuando una escala relativa mantiene la página estable al zoom.
:root {
font-size: 100%;
}
h1 {
font-size: 1.75rem;
margin: 0 0 0.75rem;
}
.lead {
font-size: 1.125rem;
max-width: 40rem;
}
Imágenes y medios flexibles
Bitmaps más anchos que el viewport provocan scroll horizontal. Regla simple: display: block, max-width: 100%, height: auto.
img,
video {
display: block;
max-width: 100%;
height: auto;
}
Hábito responsive tranquilo
Un árbol HTML. Viewport meta en su sitio. Contenedor fluido y unidades relativas primero. Flex/Grid responsive cuando las columnas deban reflujar — no un segundo sitio «solo móvil». Anota tu plan de breakpoints; Media Queries nombra la sintaxis.
Pruébalo tú
- Confirma viewport meta en una página de ejemplo.
- Envuelve contenido en contenedor fluido con
max-widthy padding. - Texto en
remy prueba zoom del navegador. - Regla de imagen flexible en una galería.
- Un layout que aún necesite media query — guárdalo para la siguiente lección.
Errores frecuentes
- Anchos px fijos en cada wrapper
- Sitio m.example.com aparte en lugar de CSS responsive en un árbol
- Olvidar viewport meta y extrañarse del «zoom out» en móvil
- Imágenes enormes sin
max-width: 100% - Creer que esta intro reemplaza media queries, breakpoints e imágenes responsive
Resumen
- El diseño responsive adapta un HTML a distintos viewports
- Viewport meta + contenedor fluido + unidades relativas = base
- Mobile-first y desktop-first son puntos de partida; media queries aplican cambios
- Flex/Grid responsive son herramientas dentro de esta mentalidad
- Siguiente: Media Queries
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior