Un sitio web responsive es aquel que se adapta y se ve bien en cualquier tamaño de pantalla: desde un móvil de 360 píxeles hasta un monitor de 1920. Hoy más de la mitad del tráfico web mundial viene de dispositivos móviles, y Google usa el índice mobile-first para posicionar páginas en los resultados de búsqueda. Un sitio que no funciona bien en móvil no solo pierde usuarios, pierde visibilidad.
En esta guía aprenderás los fundamentos del diseño responsive desde cero: el viewport, la filosofía mobile-first, las media queries y cómo aplicar todo esto con ejemplos reales de código.
El punto de partida: el meta viewport
Antes de escribir una sola línea de CSS, necesitas decirle al navegador móvil que no intente escalar la página como si fuera un escritorio. Sin esta etiqueta, el móvil renderiza la página como si tuviera 980 píxeles de ancho y luego la reduce, haciendo el texto ilegible y los botones imposibles de pulsar.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi sitio responsive</title>
<link rel="stylesheet" href="estilos.css">
</head>
width=device-width indica al navegador que use el ancho real del dispositivo como ancho de la página. initial-scale=1.0 establece el nivel de zoom inicial en 1, sin escalar. Esta etiqueta es el requisito mínimo e indispensable para cualquier sitio responsive.
Qué es una media query
Una media query es una regla de CSS que aplica estilos solo cuando se cumple una condición sobre el entorno del usuario: el ancho de la pantalla, la orientación del dispositivo, la resolución o incluso la preferencia del sistema operativo (modo oscuro, por ejemplo).
La sintaxis básica es:
@media (condicion) {
/* Estilos que se aplican solo cuando se cumple la condición */
selector {
propiedad: valor;
}
}
Las condiciones más usadas son:
/* Cuando el ancho de la ventana es de 768px o más */
@media (min-width: 768px) { }
/* Cuando el ancho es de 1024px o más */
@media (min-width: 1024px) { }
/* Cuando el ancho es menor de 600px */
@media (max-width: 599px) { }
/* Rango: entre 600px y 1023px */
@media (min-width: 600px) and (max-width: 1023px) { }
/* Orientación horizontal */
@media (orientation: landscape) { }
/* Pantallas de alta resolución (Retina) */
@media (min-resolution: 2dppx) { }
/* Preferencia de modo oscuro del sistema */
@media (prefers-color-scheme: dark) { }
/* Preferencia de movimiento reducido (accesibilidad) */
@media (prefers-reduced-motion: reduce) { }
Mobile-first: la filosofía correcta
Hay dos enfoques posibles al escribir CSS responsive:
Desktop-first: diseñas para pantallas grandes primero y usas max-width en las media queries para ir reduciendo. Era el enfoque tradicional cuando la mayoría del tráfico era de escritorio.
Mobile-first: diseñas para pantallas pequeñas primero y usas min-width para ir ampliando. Es el enfoque recomendado hoy.
Mobile-first no es solo una preferencia estética: tiene ventajas técnicas reales. Los estilos base (sin media queries) se aplican a todos los dispositivos. Los estilos dentro de min-width se añaden encima solo cuando hay espacio suficiente. Los dispositivos móviles no descargan ni calculan estilos que no van a usar. Y te obliga a priorizar el contenido esencial, que es un buen ejercicio de diseño.
/* Mobile-first: los estilos base son para móvil */
.contenedor {
padding: 1rem;
font-size: 1rem;
}
/* Se amplía para tablets */
@media (min-width: 768px) {
.contenedor {
padding: 2rem;
font-size: 1.1rem;
}
}
/* Se amplía para escritorio */
@media (min-width: 1024px) {
.contenedor {
padding: 3rem 4rem;
max-width: 1200px;
margin: 0 auto;
}
}
Los breakpoints más usados
Un breakpoint es el ancho en el que el diseño cambia. No existe un conjunto oficial de breakpoints: lo ideal es que los definas según el contenido de tu diseño, en el punto donde empiece a verse mal. Dicho esto, estos valores son los más extendidos en la industria y coinciden aproximadamente con los de Tailwind CSS y Bootstrap:
| Nombre | Ancho | Dispositivos típicos |
|---|---|---|
| xs (base) | < 640px | Móviles en vertical |
| sm | ≥ 640px | Móviles grandes, móviles en horizontal |
| md | ≥ 768px | Tablets en vertical |
| lg | ≥ 1024px | Tablets en horizontal, portátiles |
| xl | ≥ 1280px | Escritorio estándar |
| 2xl | ≥ 1536px | Pantallas grandes y monitores anchos |
En proyectos reales se trabaja principalmente con tres o cuatro breakpoints. No es necesario, ni recomendable, tener estilos diferentes para cada posible tamaño de pantalla.
Unidades flexibles: rem, em, vw, vh y %
Las media queries controlan cuándo cambian los estilos, pero el diseño responsive también depende de usar las unidades correctas para que los elementos escalen suavemente entre breakpoints.
rem (root em): relativo al tamaño de fuente del elemento raíz (html). El valor por defecto de los navegadores es 16px, por lo que 1rem = 16px. Es la unidad recomendada para tamaños de fuente, espaciados y casi todo lo que no sea layout.
em: relativo al tamaño de fuente del elemento padre. Útil para espaciados que deben escalar con el texto del componente.
%: relativo al contenedor padre. Ideal para anchos fluidos.
vw y vh: porcentaje del ancho y alto del viewport respectivamente. 100vw es el ancho completo de la ventana. Útil para secciones hero a pantalla completa o para tipografía fluida.
clamp(min, valor, max): limita un valor entre un mínimo y un máximo. Permite tipografía y espaciados que escalan fluidamente sin media queries.
/* Tipografía fluida con clamp: escala de 1rem a 1.5rem según el ancho */
h1 {
font-size: clamp(1.5rem, 4vw, 2.5rem);
}
p {
font-size: clamp(1rem, 2vw, 1.125rem);
}
/* Padding fluido */
.seccion {
padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 4rem);
}
Layout responsive con Flexbox
Flexbox es la herramienta ideal para layouts de una dimensión: elementos en fila que deben reorganizarse en columna en móvil, o viceversa.
/* HTML */
<nav class="navegacion">
<a href="/">Inicio</a>
<a href="/productos">Productos</a>
<a href="/blog">Blog</a>
<a href="/contacto">Contacto</a>
</nav>
/* CSS mobile-first */
.navegacion {
display: flex;
flex-direction: column; /* en móvil, los enlaces van en columna */
gap: 0.5rem;
padding: 1rem;
}
.navegacion a {
padding: 0.75rem 1rem;
text-decoration: none;
color: #333;
border-radius: 6px;
}
.navegacion a:hover {
background: #f0f0f0;
}
/* En tablets y escritorio, los enlaces van en fila */
@media (min-width: 768px) {
.navegacion {
flex-direction: row;
align-items: center;
justify-content: flex-end;
padding: 1rem 2rem;
}
}
El patrón flex-wrap con flex-basis es muy útil para crear grids de tarjetas que se reorganizan automáticamente:
/* Tarjetas que ocupan todo el ancho en móvil,
el 50% en tablets y el 33% en escritorio */
.grid-tarjetas {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.tarjeta {
flex: 1 1 100%; /* móvil: una tarjeta por fila */
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 1.5rem;
}
@media (min-width: 640px) {
.tarjeta {
flex: 1 1 calc(50% - 0.75rem); /* tablets: dos por fila */
}
}
@media (min-width: 1024px) {
.tarjeta {
flex: 1 1 calc(33.333% - 1rem); /* escritorio: tres por fila */
}
}
Layout responsive con CSS Grid
CSS Grid es la herramienta ideal para layouts de dos dimensiones. La función minmax() y la palabra clave auto-fill permiten crear grids que se adaptan automáticamente sin media queries adicionales.
/* Grid que ajusta automáticamente el número de columnas
según el espacio disponible */
.grid-automatico {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
Este fragmento de CSS crea tantas columnas como quepan, garantizando que cada una tenga al menos 280 píxeles. En móvil habrá una columna, en tablets dos o tres, en escritorio cuatro o más, sin escribir ni una media query.
Para layouts más estructurados con áreas nombradas:
/* HTML */
<div class="pagina">
<header class="cabecera">Cabecera</header>
<nav class="barra-lateral">Menú lateral</nav>
<main class="contenido">Contenido principal</main>
<aside class="extras">Relacionado</aside>
<footer class="pie">Pie de página</footer>
</div>
/* CSS */
.pagina {
display: grid;
min-height: 100vh;
grid-template-areas:
"cabecera"
"barra-lateral"
"contenido"
"extras"
"pie";
grid-template-rows: auto auto 1fr auto auto;
}
.cabecera { grid-area: cabecera; }
.barra-lateral { grid-area: barra-lateral; }
.contenido { grid-area: contenido; }
.extras { grid-area: extras; }
.pie { grid-area: pie; }
/* En tablets: sidebar a la izquierda del contenido */
@media (min-width: 768px) {
.pagina {
grid-template-columns: 220px 1fr;
grid-template-areas:
"cabecera cabecera"
"barra-lateral contenido"
"barra-lateral extras"
"pie pie";
grid-template-rows: auto 1fr auto auto;
}
}
/* En escritorio: sidebar + contenido + columna de extras */
@media (min-width: 1024px) {
.pagina {
grid-template-columns: 220px 1fr 280px;
grid-template-areas:
"cabecera cabecera cabecera"
"barra-lateral contenido extras"
"pie pie pie";
grid-template-rows: auto 1fr auto;
}
}
Imágenes responsive
Las imágenes son uno de los elementos que más afectan al rendimiento en móvil. Hay varias técnicas para hacerlas responsive correctamente.
La regla CSS básica
img {
max-width: 100%;
height: auto;
display: block;
}
max-width: 100% evita que la imagen desborde su contenedor. height: auto mantiene las proporciones originales. Esta regla debe estar en el reset CSS de cualquier proyecto.
El atributo srcset para diferentes resoluciones
<img
src="foto-800.jpg"
srcset="
foto-400.jpg 400w,
foto-800.jpg 800w,
foto-1200.jpg 1200w
"
sizes="
(max-width: 640px) 100vw,
(max-width: 1024px) 50vw,
800px
"
alt="Descripción de la imagen"
loading="lazy"
width="800"
height="600"
>
srcset ofrece al navegador varias versiones de la imagen con sus anchos en píxeles. sizes le dice qué tan grande va a mostrarse la imagen según el ancho de la ventana. El navegador elige automáticamente la versión más adecuada: la más pequeña que se vea nítida en ese contexto. loading="lazy" aplaza la carga hasta que la imagen está próxima al viewport.
El elemento picture para art direction
Cuando no solo quieres una versión más pequeña de la misma imagen, sino una imagen completamente diferente para móvil (recortada, con otro encuadre), usa <picture>:
<picture>
<source
media="(min-width: 1024px)"
srcset="hero-escritorio.jpg"
>
<source
media="(min-width: 640px)"
srcset="hero-tablet.jpg"
>
<img
src="hero-movil.jpg"
alt="Banner principal"
loading="eager"
>
</picture>
Tipografía responsive
El texto es el contenido principal de la mayoría de sitios. Una tipografía que funciona bien en escritorio puede ser demasiado pequeña en móvil o demasiado grande en una pantalla enorme.
/* Reset y base */
html {
font-size: 100%; /* 16px por defecto en todos los navegadores */
-webkit-text-size-adjust: 100%; /* evita que iOS aumente el tamaño en horizontal */
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
color: #1a1a1a;
}
/* Escala tipográfica fluid con clamp */
h1 { font-size: clamp(1.75rem, 5vw, 3rem); line-height: 1.2; }
h2 { font-size: clamp(1.375rem, 3vw, 2rem); line-height: 1.3; }
h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.4; }
p { font-size: clamp(1rem, 1.5vw, 1.125rem); }
/* Ancho máximo de línea para legibilidad óptima (45-75 caracteres) */
p, li {
max-width: 70ch;
}
Ejemplo completo: una página real responsive
Aquí tienes el código completo de una página con cabecera, hero, grid de tarjetas y pie de página, totalmente responsive con enfoque mobile-first.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página responsive</title>
<style>
/* ── Reset básico ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: #1a1a1a;
line-height: 1.6;
}
/* ── Contenedor ── */
.contenedor {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
@media (min-width: 768px) {
.contenedor { padding: 0 2rem; }
}
/* ── Cabecera ── */
.cabecera {
background: #fff;
border-bottom: 1px solid #e5e7eb;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 100;
}
.cabecera-interior {
display: flex;
flex-direction: column;
gap: 1rem;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: #4f46e5;
text-decoration: none;
}
.nav {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.nav a {
padding: 0.5rem 0.75rem;
text-decoration: none;
color: #555;
border-radius: 6px;
font-size: 0.9rem;
transition: background 0.15s;
}
.nav a:hover { background: #f3f4f6; color: #111; }
@media (min-width: 768px) {
.cabecera-interior {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
/* ── Hero ── */
.hero {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
color: #fff;
text-align: center;
padding: clamp(3rem, 10vw, 6rem) 1rem;
}
.hero h1 {
font-size: clamp(1.75rem, 5vw, 3.5rem);
line-height: 1.2;
margin-bottom: 1rem;
}
.hero p {
font-size: clamp(1rem, 2vw, 1.25rem);
opacity: 0.9;
max-width: 600px;
margin: 0 auto 2rem;
}
.btn-hero {
display: inline-block;
background: #fff;
color: #4f46e5;
padding: 0.85rem 2rem;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
font-size: 1rem;
transition: transform 0.15s;
}
.btn-hero:hover { transform: translateY(-2px); }
/* ── Sección de tarjetas ── */
.seccion {
padding: clamp(2rem, 6vw, 5rem) 0;
}
.seccion-titulo {
text-align: center;
margin-bottom: 2.5rem;
}
.seccion-titulo h2 {
font-size: clamp(1.5rem, 3vw, 2.25rem);
margin-bottom: 0.5rem;
}
.seccion-titulo p {
color: #666;
font-size: 1rem;
}
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 640px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}
.tarjeta {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 1.75rem;
transition: box-shadow 0.2s;
}
.tarjeta:hover {
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.tarjeta-icono {
font-size: 2rem;
margin-bottom: 1rem;
}
.tarjeta h3 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.tarjeta p { color: #555; font-size: 0.95rem; }
/* ── Footer ── */
.pie {
background: #111;
color: #aaa;
text-align: center;
padding: 2rem 1rem;
font-size: 0.875rem;
}
.pie a { color: #818cf8; text-decoration: none; }
.pie a:hover { color: #fff; }
</style>
</head>
<body>
<header class="cabecera">
<div class="contenedor cabecera-interior">
<a href="/" class="logo">MiSitio</a>
<nav class="nav">
<a href="#">Inicio</a>
<a href="#">Productos</a>
<a href="#">Blog</a>
<a href="#">Contacto</a>
</nav>
</div>
</header>
<section class="hero">
<h1>Diseño responsive desde cero</h1>
<p>Una página que se ve perfecta en cualquier dispositivo,
escrita solo con HTML y CSS.</p>
<a href="#" class="btn-hero">Empezar ahora</a>
</section>
<section class="seccion">
<div class="contenedor">
<div class="seccion-titulo">
<h2>Nuestros servicios</h2>
<p>Todo lo que necesitas en un solo lugar</p>
</div>
<div class="grid">
<article class="tarjeta">
<div class="tarjeta-icono">🎨</div>
<h3>Diseño UI</h3>
<p>Interfaces atractivas y centradas en el usuario para cualquier plataforma.</p>
</article>
<article class="tarjeta">
<div class="tarjeta-icono">⚡</div>
<h3>Rendimiento</h3>
<p>Optimización de velocidad y tiempos de carga para mejorar la experiencia.</p>
</article>
<article class="tarjeta">
<div class="tarjeta-icono">📱</div>
<h3>Mobile First</h3>
<p>Diseñamos pensando primero en el móvil, luego escalamos al escritorio.</p>
</article>
<article class="tarjeta">
<div class="tarjeta-icono">🔒</div>
<h3>Seguridad</h3>
<p>Buenas prácticas de seguridad integradas desde el inicio del proyecto.</p>
</article>
<article class="tarjeta">
<div class="tarjeta-icono">♿</div>
<h3>Accesibilidad</h3>
<p>Sitios usables por todas las personas, independientemente de sus capacidades.</p>
</article>
<article class="tarjeta">
<div class="tarjeta-icono">📈</div>
<h3>SEO técnico</h3>
<p>Estructura semántica y rendimiento optimizado para los motores de búsqueda.</p>
</article>
</div>
</div>
</section>
<footer class="pie">
<p>© 2026 MiSitio. Hecho con HTML y CSS puro.
<a href="#">Política de privacidad</a></p>
</footer>
</body>
</html>
Menú hamburguesa sin JavaScript
Un menú de navegación que se colapsa en móvil es casi obligatorio. Puede hacerse sin JavaScript usando el truco del checkbox oculto:
<header>
<a href="/" class="logo">MiSitio</a>
<input type="checkbox" id="toggle-menu" class="toggle-menu-input">
<label for="toggle-menu" class="hamburguesa" aria-label="Abrir menú">
<span></span>
<span></span>
<span></span>
</label>
<nav class="nav-mobile">
<a href="/">Inicio</a>
<a href="/productos">Productos</a>
<a href="/blog">Blog</a>
<a href="/contacto">Contacto</a>
</nav>
</header>
/* Ocultar el checkbox pero mantenerlo funcional */
.toggle-menu-input {
display: none;
}
/* El botón hamburguesa: tres líneas */
.hamburguesa {
display: flex;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 0.5rem;
}
.hamburguesa span {
display: block;
width: 24px;
height: 2px;
background: #333;
border-radius: 2px;
transition: transform 0.3s, opacity 0.3s;
}
/* El menú está oculto por defecto en móvil */
.nav-mobile {
display: none;
flex-direction: column;
gap: 0.25rem;
padding: 1rem 0;
}
.nav-mobile a {
padding: 0.75rem 1rem;
text-decoration: none;
color: #333;
border-radius: 6px;
}
.nav-mobile a:hover { background: #f3f4f6; }
/* Cuando el checkbox está marcado, mostrar el menú */
.toggle-menu-input:checked ~ .nav-mobile {
display: flex;
}
/* Animar el icono hamburguesa → X */
.toggle-menu-input:checked ~ .hamburguesa span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.toggle-menu-input:checked ~ .hamburguesa span:nth-child(2) {
opacity: 0;
}
.toggle-menu-input:checked ~ .hamburguesa span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* En escritorio: ocultar hamburguesa, mostrar nav en fila */
@media (min-width: 768px) {
.hamburguesa { display: none; }
.nav-mobile {
display: flex !important;
flex-direction: row;
padding: 0;
}
}
Errores comunes al hacer diseño responsive
Olvidar el meta viewport. Es el error más básico y el que produce los resultados más espectaculares: la página se ve diminuta y sin zoom en móvil. Siempre es la primera etiqueta que va en el <head>.
Usar píxeles fijos para todo. Un elemento con width: 800px desborda cualquier pantalla de móvil. Usa porcentajes, max-width o unidades relativas para que los elementos se adapten a su contenedor.
Targets táctiles demasiado pequeños. Los botones y enlaces en móvil deben tener al menos 44×44 píxeles de área táctil (recomendación de Apple y de las WCAG). Un enlace de texto sin padding puede ser casi imposible de pulsar con el dedo.
/* Mal: área táctil demasiado pequeña */
.enlace-nav { font-size: 14px; }
/* Bien: área táctil adecuada */
.enlace-nav {
display: inline-block;
padding: 0.75rem 1rem;
font-size: 1rem;
min-height: 44px;
}
No probar en dispositivos reales. Las DevTools del navegador tienen un modo de simulación de dispositivos, pero no es lo mismo que un dispositivo real. El rendimiento, el comportamiento táctil y los tamaños de fuente pueden ser diferentes. Prueba siempre en al menos un iPhone y un Android real antes de publicar.
Abusar de los breakpoints. Si tienes más de cinco o seis breakpoints distintos en tu CSS, algo está mal en la estructura del layout. Un buen diseño responsive necesita pocos breakpoints porque los elementos escalan de forma fluida entre ellos.
Usar !important para parchar problemas de especificidad. Cuando el responsive se rompe y se arregla con !important, el problema real suele estar en el orden de los estilos o en una especificidad demasiado alta. Revisa la cascada en lugar de parchear.
Herramientas para probar el diseño responsive
- DevTools del navegador (Chrome, Firefox, Safari): pulsa F12 y activa el modo de dispositivo con el icono de móvil. Puedes simular cualquier tamaño de pantalla y rotar la orientación.
- Responsive Design Checker y Responsively App: muestran tu sitio en múltiples tamaños de pantalla simultáneamente, ideal para ver todos los breakpoints a la vez.
- PageSpeed Insights de Google: analiza el rendimiento en móvil y da recomendaciones concretas de mejora.
- BrowserStack: prueba en dispositivos y navegadores reales en la nube sin necesidad de tenerlos físicamente.
Resumen
- El meta viewport es el primer paso, sin él nada funciona en móvil.
- Adopta la filosofía mobile-first: estilos base para móvil, media queries con
min-widthpara pantallas más grandes. - Usa unidades relativas (
rem,%,vw) yclamp()para que los elementos escalen fluidamente entre breakpoints. - Flexbox para layouts de una dimensión (filas de navegación, tarjetas que cambian de columna a fila). CSS Grid para layouts de dos dimensiones (páginas completas, grids complejos).
- Haz tus imágenes responsive con
max-width: 100%,srcsetpara diferentes resoluciones y<picture>para art direction. - Los targets táctiles deben tener al menos 44×44 píxeles de área pulsable.
- Prueba siempre en dispositivos reales, no solo en el simulador del navegador.
No hay comentarios todavía. Sé el primero en compartir tu opinión.