Una página web que se ve bien en celulares usa diseño responsivo: técnicas de CSS que adaptan el contenido a cualquier tamaño de pantalla.
¿Sabías que en México más del 80% de las personas navegan internet desde su celular? Si tu página solo se ve bien en computadora, estás perdiendo a la mayoría de tus visitantes. Empresas como Liverpool y Mercado Libre invierten millones en que sus sitios funcionen perfecto en pantallas chicas. Tú puedes lograr lo mismo con unas pocas líneas de CSS.
La historia de dos versiones de una misma página
Carlos tiene 24 años y vive en Monterrey. Lleva tres semanas aprendiendo HTML y CSS. Por fin terminó su primera página: un menú digital para la taquería de su tía.
El problema llegó cuando su tía abrió la página en su celular. El texto se salía de la pantalla. Las imágenes eran gigantes. Los botones eran imposibles de tocar. Carlos no entendía por qué se veía tan mal.
Eso le pasa a casi todos al principio. La razón es simple: por defecto, los navegadores muestran las páginas como si fueran para una pantalla grande. Necesitas decirle al navegador que se adapte.
El primer paso: la etiqueta meta viewport
Antes de escribir una sola línea de CSS responsivo, agrega esta etiqueta en el <head> de tu HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esta línea le dice al navegador: "muestra la página al ancho real de la pantalla, sin hacer zoom".
Sin esta etiqueta, tu celular mostrará la página como si tuviera 980 píxeles de ancho. Todo se verá miniatura. Carlos agregó esta línea y de inmediato el texto dejó de salirse. Es el primer paso obligatorio en cualquier proyecto.
Unidades flexibles: em, rem y %
Cuando aprendes CSS por primera vez, usas píxeles para todo. font-size: 16px, width: 300px, margin: 20px. Los píxeles son exactos, pero no se adaptan.
Existen unidades que sí se adaptan:
rem — es relativo al tamaño de fuente raíz del documento. Por defecto, 1rem = 16px. Si escribes font-size: 1.5rem, el texto mide 24px. Si alguien en su celular aumenta el tamaño de fuente del sistema, tu página respeta esa preferencia.
% — es relativo al contenedor padre. Si un <div> tiene width: 80%, siempre ocupará el 80% del espacio disponible, sin importar si la pantalla mide 320px o 1,440px.
Sofía diseña páginas freelance desde Guadalajara. Cobra entre $8,000 y $15,000 por proyecto. Ella usa siempre porcentajes para los anchos de las secciones. Así entrega páginas que se ven bien en celular sin esfuerzo extra. "El truco es no pensar en píxeles fijos", dice. "Piensa en proporciones."
.contenedor {
width: 90%;
max-width: 1100px;
margin: 0 auto;
}
Ese código hace que el contenido ocupe el 90% de la pantalla en celulares, pero nunca crezca más de 1,100px en pantallas grandes. El margin: 0 auto lo centra. Simple y poderoso.
¿Qué son las media queries?
Una media query es una condición en CSS: "si la pantalla mide menos de X píxeles, aplica estos estilos".
Es como decirle a tu página: "en celular, muestra el menú en columna. En computadora, muéstralo en fila."
La sintaxis básica es esta:
@media (max-width: 600px) {
/* Aquí van los estilos para pantallas de 600px o menos */
}
Todo lo que escribas dentro de esas llaves solo se aplica cuando la pantalla es de 600px o menos. Fuera de ese bloque, tus estilos normales siguen funcionando.
Ejemplo real: la tarjeta de producto
Imagina que tienes una tarjeta de producto al estilo Mercado Libre. En computadora, quieres tres tarjetas en fila. En celular, quieres una sola tarjeta por fila.
.tarjetas {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.tarjeta {
width: 30%;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 8px;
padding: 1rem;
}
@media (max-width: 600px) {
.tarjeta {
width: 100%;
}
}
En pantallas grandes, cada tarjeta ocupa el 30% del espacio: tres por fila. En celular, cada tarjeta ocupa el 100%: una por fila. ¿Ves cómo funciona? Solo cambias el width dentro de la media query.
Carlos aplicó esto al menú de su tía. En computadora, los platillos se muestran en tres columnas. En celular, en una sola columna fácil de leer. Su tía quedó feliz.
Breakpoints: los puntos de quiebre más comunes
Un breakpoint es el ancho donde tu diseño cambia de forma. No existe una lista oficial, pero estos son los más usados:
| Dispositivo | Ancho aproximado | Media query |
|---|---|---|
| Celular chico | hasta 480px | @media (max-width: 480px) |
| Celular normal | hasta 600px | @media (max-width: 600px) |
| Tablet | hasta 768px | @media (max-width: 768px) |
| Laptop | hasta 1024px | @media (max-width: 1024px) |
No necesitas usar todos en cada proyecto. Para empezar, un solo breakpoint en 600px ya hace gran diferencia.
El enfoque mobile-first
Hay dos formas de pensar el diseño responsivo.
La primera: diseñar para computadora y luego adaptar al celular con max-width. Es lo que hemos visto hasta ahora.
La segunda: diseñar primero para celular y luego expandir para pantallas grandes con min-width. Esto se llama mobile-first y es el enfoque que usan equipos profesionales como los de FEMSA Digital.
/* Estilos base: para celular */
.tarjeta {
width: 100%;
}
/* Para pantallas más grandes */
@media (min-width: 600px) {
.tarjeta {
width: 30%;
}
}
Cuando piensas en celular primero, tu código base es más limpio. Las pantallas grandes solo añaden complejidad encima de una base sólida. Es como construir una casa: primero los cimientos, luego los pisos de arriba.
Errores comunes que debes evitar
Olvidar la etiqueta meta viewport. Es el error más frecuente. Sin ella, ninguna media query funciona bien en celular real. Ponla siempre en el <head>.
Usar píxeles fijos para los anchos. Un width: 400px en un celular de 360px se desborda. Prefiere width: 90% o max-width para controlar tamaños máximos sin romper nada.
Poner demasiados breakpoints. No necesitas media queries para cada tamaño imaginable. Empieza con uno o dos. Agrega más solo si el diseño lo necesita. Menos código es más fácil de mantener.
No probar en celular real. Chrome tiene un simulador de pantallas (presiona F12 y busca el ícono de celular), pero nada reemplaza ver tu página en un teléfono de verdad. Pídele a alguien que abra tu página en su celular y observa qué pasa.
Lo que aprendió Sofía el día que su cliente la llamó enojado
Sofía entregó un proyecto a una empresa de ropa en Puebla. El sitio se veía perfecto en su laptop. Pero el dueño la llamó furioso: "En mi iPhone no se ve nada bien."
Sofía revisó y encontró dos problemas. Primero, había olvidado la etiqueta viewport. Segundo, había usado width: 500px en el menú de navegación.
Corrigió ambas cosas en veinte minutos. El dueño quedó contento. Sofía aprendió a probar en celular antes de entregar cualquier proyecto. Ahora es parte de su checklist de siempre.
Tú puedes evitar ese error desde hoy. Abre las herramientas de desarrollo de Chrome (F12), activa el modo responsivo y prueba tu página en diferentes tamaños antes de mostrarla a alguien más.
Prueba esto ahora mismo
Abre cualquier archivo HTML que hayas creado en este curso. Agrega la etiqueta viewport si no la tienes. Luego añade este CSS al final de tu hoja de estilos:
* {
box-sizing: border-box;
}
.contenedor {
width: 90%;
max-width: 1000px;
margin: 0 auto;
}
@media (max-width: 600px) {
body {
font-size: 1rem;
}
}
Envuelve tu contenido en un <div class="contenedor">. Abre el simulador de Chrome. Cambia el ancho a 375px, que es el tamaño de un iPhone común. ¿Se ve mejor? Casi siempre sí.
El diseño responsivo no es magia. Es pensar en tus usuarios y darles una buena experiencia sin importar qué dispositivo usen.