Las media queries en CSS permiten aplicar estilos cuando se cumple una condición, como disponer de un ancho mínimo de pantalla. Con ellas puedes cambiar las columnas, los espacios o la navegación cuando el contenido necesita otra distribución.
@media (min-width: 48rem) {
.contenido { display: grid; grid-template-columns: 2fr 1fr; }
}No necesitas una regla por cada dispositivo. Define los puntos de cambio según el contenido: cuando una línea se vuelve demasiado larga o las tarjetas dejan de resultar cómodas, puede ser momento de adaptar el diseño.
Primero comprueba la etiqueta viewport
Añade esta línea al head del documento:
<meta name="viewport" content="width=device-width, initial-scale=1">Sin una configuración adecuada, algunos navegadores móviles pueden trabajar con un área de diseño virtual más ancha y escalar el resultado. No desactives el zoom para intentar corregirlo.
Ejemplo responsive con enfoque mobile first
<section class="servicios" aria-label="Servicios">
<article><h2>Diseño web</h2><p>Una web para tu negocio.</p></article>
<article><h2>Branding</h2><p>Identidad visual coherente.</p></article>
<article><h2>SEO</h2><p>Contenidos y rendimiento.</p></article>
</section>
<style>
.servicios { display: grid; grid-template-columns: 1fr; gap: 16px; }
.servicios article { padding: 24px; background: #eef6ff; border-radius: 12px; }
@media (min-width: 40rem) {
.servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
.servicios { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
</style>El estilo base utiliza una columna. Las consultas posteriores amplían el diseño cuando hay espacio. Los valores son ejemplos para esta composición, no medidas universales de móvil y tablet.
Min-width y max-width: cómo elegir
min-width activa una regla desde el ancho indicado y encaja bien con una base para pantallas estrechas. max-width establece un límite superior y puede resultar útil al adaptar un diseño existente.
Ambas condiciones incluyen el límite. Si dos consultas coinciden en el mismo ancho, la cascada decide qué declaración se aplica: influyen las capas, la importancia, la especificidad y el orden. Evita solapamientos innecesarios.
Las media queries no solo detectan anchura
También puedes atender preferencias del usuario. Por ejemplo, si tu componente incluye una animación, ofrece una alternativa para quien haya solicitado menos movimiento:
@media (prefers-reduced-motion: reduce) {
.tarjeta-animada { animation: none; transition: none; }
}Aplica esa regla al componente que controlas. Desactivar indiscriminadamente todas las animaciones de una web puede interferir con funciones que dependen de sus eventos.
Cómo probar tus breakpoints
- Abre las herramientas del navegador y reduce el ancho de forma continua.
- Comprueba tamaños intermedios, no solo los predefinidos.
- Prueba textos largos, zoom e imágenes reales.
- Revisa al menos un dispositivo táctil cuando sea posible.
Una página puede verse bien a 375 y 1440 píxeles y fallar entre ambos. Las pruebas continuas ayudan a encontrar esos huecos.
Errores frecuentes
Si una consulta no funciona, comprueba que el archivo CSS se carga, que la sintaxis es válida y que otra declaración no la sobrescribe. Revisa también si estás midiendo el viewport cuando en realidad el problema depende del ancho de un contenedor.
Preguntas frecuentes
¿Todo diseño responsive necesita muchas media queries?
No. Grid, Flexbox y tamaños flexibles pueden resolver parte del trabajo sin ellas.
¿Ocultar algo en móvil impide que se descargue?
No debes asumirlo. display: none controla la presentación, no constituye por sí solo una estrategia de carga.
Continúa con los tutoriales de CSS y evita añadir un framework solo para resolver un cambio sencillo de distribución.
Referencia técnica: documentación de MDN.
