Media Queries en CSS

Las media queries son una característica fundamental de CSS que permite aplicar estilos específicos según las características del dispositivo o del navegador. Son la base del diseño web responsivo, permitiendo que los sitios web se adapten a diferentes tamaños de pantalla y condiciones de visualización.

Fundamentos de las Media Queries

Sintaxis básica

Las media queries se definen utilizando la regla @media seguida de una o más condiciones:

@media tipo-de-medio and (característica: valor) {
  /* Reglas CSS que se aplicarán cuando se cumplan las condiciones */
}

Tipos de medios

Especifican el tipo de dispositivo al que se aplica la consulta:

/* Se aplica a todos los dispositivos */
@media all { ... }

/* Se aplica solo a pantallas (computadoras, tablets, teléfonos) */
@media screen { ... }

/* Se aplica solo a impresoras */
@media print { ... }

/* Se aplica a dispositivos con modo de lectura */
@media speech { ... }

Características de medios

Las características de medios permiten probar propiedades específicas del dispositivo:

/* Ancho de la ventana del navegador */
@media (width: 768px) { ... }
@media (min-width: 768px) { ... }
@media (max-width: 768px) { ... }

/* Alto de la ventana del navegador */
@media (height: 600px) { ... }
@media (min-height: 600px) { ... }
@media (max-height: 600px) { ... }

/* Relación de aspecto */
@media (aspect-ratio: 16/9) { ... }
@media (min-aspect-ratio: 1/1) { ... }

/* Orientación */
@media (orientation: landscape) { ... }
@media (orientation: portrait) { ... }

/* Resolución de pantalla */
@media (resolution: 300dpi) { ... }
@media (min-resolution: 2dppx) { ... }

Operadores lógicos

Permiten combinar o negar condiciones:

/* AND: ambas condiciones deben cumplirse */
@media screen and (min-width: 768px) { ... }

/* OR: al menos una condición debe cumplirse (usando múltiples consultas) */
@media screen and (min-width: 768px), screen and (orientation: landscape) { ... }

/* NOT: niega la condición */
@media not screen { ... }

/* ONLY: previene que navegadores antiguos apliquen los estilos */
@media only screen and (min-width: 768px) { ... }

Diseño Responsivo con Media Queries

Enfoque Mobile First

El enfoque "Mobile First" consiste en diseñar primero para dispositivos móviles y luego expandir para pantallas más grandes:

/* Estilos base para móviles */
.contenedor {
  width: 100%;
  padding: 10px;
}

/* Tablets */
@media (min-width: 768px) {
  .contenedor {
    padding: 20px;
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Desktops */
@media (min-width: 1024px) {
  .contenedor {
    padding: 30px;
    max-width: 960px;
  }
}

/* Pantallas grandes */
@media (min-width: 1280px) {
  .contenedor {
    max-width: 1200px;
  }
}

Breakpoints comunes

Los breakpoints son los puntos donde el diseño cambia para adaptarse a diferentes tamaños de pantalla:

/* Móviles pequeños */
@media (max-width: 575.98px) { ... }

/* Móviles */
@media (min-width: 576px) and (max-width: 767.98px) { ... }

/* Tablets */
@media (min-width: 768px) and (max-width: 991.98px) { ... }

/* Desktops */
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

/* Desktops grandes */
@media (min-width: 1200px) { ... }

Ejemplo de diseño responsivo completo

<div class="contenedor">
  <header class="cabecera">
    <h1>Mi Sitio Web</h1>
    <nav class="navegacion">
      <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Acerca de</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
    </nav>
  </header>
  <div class="contenido">
    <main class="principal">
      <h2>Contenido Principal</h2>
      <p>Lorem ipsum dolor sit amet...</p>
    </main>
    <aside class="barra-lateral">
      <h3>Contenido Relacionado</h3>
      <ul>
        <li><a href="#">Artículo 1</a></li>
        <li><a href="#">Artículo 2</a></li>
        <li><a href="#">Artículo 3</a></li>
      </ul>
    </aside>
  </div>
  <footer class="pie">
    <p>&copy; 2025 Mi Sitio Web</p>
  </footer>
</div>

/* Estilos base (móviles primero) */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
}

.contenedor {
  width: 100%;
  padding: 15px;
}

.cabecera {
  background-color: #f8f9fa;
  padding: 15px;
  text-align: center;
}

.navegacion ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.navegacion li {
  margin-bottom: 5px;
}

.navegacion a {
  text-decoration: none;
  color: #333;
  padding: 5px;
  display: block;
}

.contenido {
  display: flex;
  flex-direction: column;
  margin: 15px 0;
}

.principal {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 15px;
}

.barra-lateral {
  background-color: #f8f9fa;
  padding: 15px;
}

.barra-lateral ul {
  list-style: none;
  margin-top: 10px;
}

.barra-lateral li {
  margin-bottom: 5px;
}

.pie {
  background-color: #f8f9fa;
  padding: 15px;
  text-align: center;
}

/* Tablets */
@media (min-width: 768px) {
  .contenedor {
    padding: 20px;
    max-width: 720px;
    margin: 0 auto;
  }
  
  .navegacion ul {
    flex-direction: row;
    justify-content: center;
  }
  
  .navegacion li {
    margin: 0 10px;
  }
  
  .contenido {
    flex-direction: row;
    gap: 20px;
  }
  
  .principal {
    flex: 2;
    margin-bottom: 0;
  }
  
  .barra-lateral {
    flex: 1;
  }
}

/* Desktops */
@media (min-width: 992px) {
  .contenedor {
    max-width: 960px;
  }
  
  .cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
  
  .navegacion {
    margin-top: 0;
  }
  
  .navegacion ul {
    margin-top: 0;
  }
}

/* Pantallas grandes */
@media (min-width: 1200px) {
  .contenedor {
    max-width: 1140px;
  }
}

Casos de uso avanzados

Detección de características específicas

/* Dispositivos con pantalla táctil */
@media (hover: none) and (pointer: coarse) {
  .boton {
    padding: 12px 24px; /* Botones más grandes para facilitar el toque */
  }
}

/* Dispositivos sin pantalla táctil (con mouse) */
@media (hover: hover) and (pointer: fine) {
  .boton:hover {
    background-color: #0056b3;
  }
}

/* Dispositivos con pantalla de alta resolución (Retina) */
@media (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
  }
}

/* Preferencia de reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Preferencia de esquema de color */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #f0f0f0;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background-color: #ffffff;
    color: #333333;
  }
}

Media queries para impresión

/* Estilos específicos para impresión */
@media print {
  /* Ocultar elementos innecesarios */
  nav, footer, .botones, .anuncios {
    display: none;
  }
  
  /* Asegurar que el fondo sea blanco y el texto negro */
  body {
    background-color: white;
    color: black;
    font-size: 12pt;
  }
  
  /* Mostrar URLs completas para los enlaces */
  a::after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }
  
  /* Evitar que el contenido se corte */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  
  img {
    page-break-inside: avoid;
    max-width: 100% !important;
  }
  
  /* Asegurar que cada sección comience en una nueva página */
  section {
    page-break-before: always;
  }
}

Contenedores con consultas

CSS Container Queries es una característica más reciente que permite aplicar estilos basados en el tamaño del contenedor padre, en lugar del viewport:

/* Definir un contenedor */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* Estilos que cambian según el tamaño del contenedor */
@container card (min-width: 400px) {
  .card {
    display: flex;
  }
  
  .card-image {
    width: 40%;
  }
  
  .card-content {
    width: 60%;
  }
}

Mejores prácticas

1. Utiliza unidades relativas

body {
  font-size: 16px; /* Base font size */
}

h1 {
  font-size: 2em; /* 32px basado en el tamaño base */
}

.contenedor {
  width: 90%; /* 90% del ancho del padre */
  max-width: 1200px;
  margin: 0 auto;
}

.columna {
  width: calc(100% / 3 - 20px); /* Cálculo dinámico */
}

2. Evita breakpoints basados en dispositivos específicos

En lugar de orientar dispositivos específicos, diseña breakpoints basados en donde tu diseño necesita ajustarse:

/* Mal enfoque */
/* iPhone específico */
@media (width: 375px) { ... }

/* Buen enfoque */
/* Cuando el diseño necesita cambiar */
@media (min-width: 600px) { ... }

3. Limita el número de breakpoints

Demasiados breakpoints pueden hacer que el código sea difícil de mantener:

/* Enfoque simplificado con pocos breakpoints */
/* Móvil (predeterminado) */
.elemento { ... }

/* Tablet */
@media (min-width: 768px) { ... }

/* Desktop */
@media (min-width: 1024px) { ... }

/* Pantallas grandes (opcional) */
@media (min-width: 1440px) { ... }

4. Organiza tus media queries

Dos enfoques comunes:

1. Media queries al final del archivo:

/* Estilos base */
.elemento {
  width: 100%;
}

/* Todas las media queries agrupadas al final */
@media (min-width: 768px) {
  .elemento {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .elemento {
    width: 33.333%;
  }
}

2. Media queries junto a los componentes:

/* Estilos del componente y sus media queries juntos */
.elemento {
  width: 100%;
}

@media (min-width: 768px) {
  .elemento {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .elemento {
    width: 33.333%;
  }
}

/* Siguiente componente */
.otro-elemento {
  /* ... */
}

5. Utiliza la etiqueta meta viewport

Asegúrate de incluir la etiqueta meta viewport en el HTML para un comportamiento responsivo adecuado:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Herramientas y técnicas

Depuración de diseños responsivos

1. Herramientas de desarrollo del navegador:
   • Chrome DevTools: Modo de diseño responsivo
   • Firefox Responsive Design Mode
2. Extensiones de navegador:
   • Responsive Viewer
   • Window Resizer

Frameworks CSS con sistemas de grid responsivos

/* Ejemplo simplificado de sistema de grid responsivo */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col {
  padding: 0 15px;
  width: 100%;
}

@media (min-width: 576px) {
  .col-sm-6 {
    width: 50%;
  }
}

@media (min-width: 768px) {
  .col-md-4 {
    width: 33.333%;
  }
}

@media (min-width: 992px) {
  .col-lg-3 {
    width: 25%;
  }
}

Imágenes responsivas

<!-- Imágenes responsivas con srcset -->
<img 
  src="imagen-small.jpg" 
  srcset="imagen-small.jpg 500w,
          imagen-medium.jpg 1000w,
          imagen-large.jpg 1500w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  alt="Descripción de la imagen">

<!-- Picture para art direction -->
<picture>
  <source media="(max-width: 600px)" srcset="imagen-mobile.jpg">
  <source media="(max-width: 1200px)" srcset="imagen-tablet.jpg">
  <img src="imagen-desktop.jpg" alt="Descripción de la imagen">
</picture>

/* Imágenes responsivas con CSS */
.imagen-fluida {
  max-width: 100%;
  height: auto;
}

.imagen-fondo {
  background-image: url('imagen-small.jpg');
  
  @media (min-width: 768px) {
    background-image: url('imagen-medium.jpg');
  }
  
  @media (min-width: 1200px) {
    background-image: url('imagen-large.jpg');
  }
}

Compatibilidad con navegadores

Las media queries son compatibles con todos los navegadores modernos. Para navegadores antiguos, considera:

1. Polyfills: Bibliotecas como Respond.js para IE8
2. Enfoque progresivo: Proporcionar una experiencia básica para todos los navegadores y mejorar para navegadores modernos

/* Estilos base para todos los navegadores */
.elemento {
  width: 100%;
  padding: 10px;
}

/* Mejoras para navegadores modernos */
@supports (display: flex) {
  .contenedor {
    display: flex;
    flex-wrap: wrap;
  }
}

Conclusión

Las media queries son una herramienta esencial para crear sitios web responsivos que funcionen bien en una amplia variedad de dispositivos. Al combinar media queries con un enfoque mobile-first, unidades relativas y técnicas modernas de CSS, puedes crear experiencias de usuario adaptables y consistentes en cualquier tamaño de pantalla.

La clave para un diseño responsivo exitoso no es solo adaptar el diseño a diferentes tamaños de pantalla, sino pensar en la experiencia del usuario en cada contexto y optimizar la interacción para cada dispositivo.