Tutorial CSS: Diseño responsive con media queries

Sintaxis de @media y tipos de medios (screen, print)

Las media queries son una de las herramientas fundamentales en CSS para crear diseños adaptables a diferentes dispositivos y contextos. Permiten aplicar estilos específicos según las características del dispositivo que muestra nuestra página web, como el tamaño de pantalla, la resolución o el tipo de medio.

La sintaxis básica de una media query utiliza la regla @media seguida de una o más condiciones que determinan cuándo se aplicarán los estilos contenidos en ella. Veamos su estructura fundamental:

@media tipo-de-medio (característica) {
  /* Reglas CSS que se aplicarán cuando se cumpla la condición */
}

Tipos de medios

Los tipos de medios especifican la categoría general del dispositivo que está mostrando el documento. Aunque existen varios tipos, los más utilizados en el desarrollo web moderno son:

• screen: Se aplica a pantallas de ordenadores, tablets, smartphones y dispositivos similares.
• print: Se aplica cuando el documento se imprime o se visualiza en modo de vista previa de impresión.

Veamos un ejemplo sencillo de cómo utilizar estos tipos de medios:

/* Estilos que se aplican solo en pantallas */
@media screen {
  body {
    background-color: #f0f0f0;
    color: #333;
  }
}

/* Estilos que se aplican solo al imprimir */
@media print {
  body {
    background-color: white;
    color: black;
    font-size: 12pt;
  }
  
  /* Ocultar elementos innecesarios en la versión impresa */
  nav, footer, .ads {
    display: none;
  }
}

En este ejemplo, cuando el usuario visualiza la página en una pantalla, el fondo será gris claro con texto oscuro. Sin embargo, al imprimir, el fondo será blanco, el texto negro, y elementos como la navegación, pie de página y publicidad no aparecerán en la versión impresa.

Otros tipos de medios menos utilizados

Aunque screen y print son los más comunes, CSS también define otros tipos de medios:

• all: Se aplica a todos los dispositivos (valor por defecto si no se especifica).
• speech: Destinado a sintetizadores de voz.

/* Se aplica a todos los dispositivos */
@media all {
  body {
    margin: 0;
    padding: 0;
  }
}

/* Específico para lectores de pantalla */
@media speech {
  .visually-hidden {
    speak: normal;
  }
}

Omitir el tipo de medio

Es importante mencionar que si no especificamos un tipo de medio, CSS asume all por defecto. Por eso, muchas veces verás media queries sin tipo de medio explícito:

/* Equivalente a @media all (max-width: 600px) */
@media (max-width: 600px) {
  .container {
    width: 100%;
  }
}

Combinando media queries con hojas de estilo externas

También podemos aplicar media queries al vincular hojas de estilo externas usando el atributo media en la etiqueta <link>:

<!-- Hoja de estilos general -->
<link rel="stylesheet" href="styles.css">

<!-- Hoja de estilos específica para impresión -->
<link rel="stylesheet" href="print.css" media="print">

<!-- Hoja de estilos para pantallas pequeñas -->
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">

Esta técnica es útil para organizar mejor nuestro código CSS, separando los estilos específicos para cada contexto en archivos diferentes.

Ejemplo práctico: Adaptando contenido para impresión

Veamos un ejemplo más completo de cómo podríamos adaptar una página web para su versión impresa:

/* Estilos generales (para pantalla) */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  max-width: 1200px;
  margin: 0 auto;
}

/* Estilos específicos para impresión */
@media print {
  /* Ajustes básicos para impresión */
  body {
    font-family: "Times New Roman", serif;
    line-height: 1.2;
    color: #000;
  }
  
  /* Asegurar que los enlaces muestren su URL */
  a::after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }
  
  /* Evitar saltos de página dentro de elementos importantes */
  h1, h2, h3, 
  figure, 
  .no-break-inside {
    page-break-inside: avoid;
  }
  
  /* Forzar salto de página antes de ciertos elementos */
  h1, .page-break-before {
    page-break-before: always;
  }
  
  /* Ocultar elementos no relevantes para impresión */
  header nav,
  .sidebar,
  .comments,
  .social-buttons,
  button,
  .video-container {
    display: none;
  }
  
  /* Expandir contenedores a ancho completo */
  .container, 
  .content {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

Este ejemplo muestra cómo podemos crear una experiencia de impresión optimizada que:

1. Cambia la tipografía a una más adecuada para impresión
2. Muestra las URLs de los enlaces
3. Controla los saltos de página
4. Oculta elementos interactivos o irrelevantes para la versión impresa
5. Ajusta el diseño para aprovechar mejor el espacio en papel

Consideraciones importantes

Al trabajar con media queries y tipos de medios, es recomendable tener en cuenta estas buenas prácticas:

• Comienza con un diseño base que funcione en cualquier dispositivo antes de aplicar media queries específicas.
• Utiliza @media print para optimizar la versión impresa de tu sitio, incluso si parece un escenario poco común.
• Prueba tus media queries en diferentes dispositivos y navegadores para asegurar la compatibilidad.
• Considera el uso de unidades relativas (como em o rem) en lugar de píxeles para una mejor adaptabilidad.

Las media queries son una herramienta poderosa que, combinada con un enfoque de diseño mobile-first o responsive, permite crear experiencias web que se adaptan perfectamente a cualquier dispositivo o contexto de uso.

Consultas basadas en ancho con min-width y max-width

Las consultas basadas en ancho son probablemente las media queries más utilizadas en el desarrollo web moderno. Estas consultas nos permiten aplicar estilos específicos dependiendo del ancho de la ventana del navegador, lo que resulta fundamental para crear diseños responsive que se adapten a diferentes dispositivos.

Las dos propiedades principales para controlar estas consultas son min-width y max-width:

• min-width: Aplica estilos cuando el ancho de la ventana es igual o mayor que el valor especificado.
• max-width: Aplica estilos cuando el ancho de la ventana es igual o menor que el valor especificado.

Uso básico de min-width

La propiedad min-width es especialmente útil cuando seguimos un enfoque mobile-first, donde comenzamos diseñando para dispositivos móviles y luego añadimos complejidad para pantallas más grandes:

/* Estilos base para todos los dispositivos */
.container {
  width: 100%;
  padding: 15px;
}

/* Cuando la pantalla sea al menos 768px */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* Cuando la pantalla sea al menos 992px */
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

En este ejemplo, nuestro contenedor ocupa el 100% del ancho en dispositivos pequeños. A medida que la pantalla crece, el contenedor adopta anchos fijos y se centra automáticamente.

Uso básico de max-width

La propiedad max-width es ideal cuando seguimos un enfoque desktop-first, donde comenzamos con el diseño para pantallas grandes y luego lo simplificamos para dispositivos más pequeños:

/* Estilos base para pantallas grandes */
.navigation {
  display: flex;
  justify-content: space-between;
}

.nav-item {
  margin: 0 15px;
}

/* Cuando la pantalla sea 767px o menos */
@media (max-width: 767px) {
  .navigation {
    flex-direction: column;
  }
  
  .nav-item {
    margin: 10px 0;
    text-align: center;
  }
}

En este caso, tenemos un menú horizontal en pantallas grandes que se convierte en un menú vertical cuando el ancho es menor a 768px.

Combinando min-width y max-width

Podemos combinar ambas propiedades para dirigirnos a rangos específicos de ancho de pantalla:

/* Estilos específicos para tablets */
@media (min-width: 768px) and (max-width: 991px) {
  .sidebar {
    width: 30%;
  }
  
  .main-content {
    width: 70%;
  }
}

Este código aplica estilos únicamente cuando la pantalla tiene entre 768px y 991px de ancho, un rango típico para tablets.

Ejemplo práctico: Sistema de columnas responsive

Veamos cómo podríamos implementar un sistema simple de columnas responsive utilizando media queries:

/* Base: columnas apiladas en móvil */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.column {
  width: 100%;
  padding: 0 15px;
  margin-bottom: 20px;
}

/* Tablets (2 columnas) */
@media (min-width: 768px) {
  .column {
    width: 50%;
    margin-bottom: 30px;
  }
}

/* Escritorio (3 columnas) */
@media (min-width: 992px) {
  .column {
    width: 33.333%;
  }
}

/* Pantallas grandes (4 columnas) */
@media (min-width: 1200px) {
  .column {
    width: 25%;
  }
}

Con este código, nuestras columnas se organizarán automáticamente según el ancho de la pantalla:

• En móviles: 1 columna (100% de ancho)
• En tablets: 2 columnas (50% cada una)
• En escritorio: 3 columnas (33.33% cada una)
• En pantallas grandes: 4 columnas (25% cada una)

Enfoque mobile-first vs desktop-first

Existen dos enfoques principales al trabajar con media queries:

• Mobile-first: Comenzamos con estilos básicos para dispositivos móviles y usamos min-width para añadir complejidad en pantallas más grandes.

/* Estilos base para móvil */
.card {
  padding: 15px;
  font-size: 14px;
}

/* Mejoras para tablet y escritorio */
@media (min-width: 768px) {
  .card {
    padding: 20px;
    font-size: 16px;
  }
}

• Desktop-first: Comenzamos con estilos completos para escritorio y usamos max-width para simplificar en pantallas más pequeñas.

/* Estilos base para escritorio */
.card {
  padding: 20px;
  font-size: 16px;
}

/* Simplificación para móvil */
@media (max-width: 767px) {
  .card {
    padding: 15px;
    font-size: 14px;
  }
}

La tendencia actual favorece el enfoque mobile-first porque:

• Prioriza la experiencia móvil, que representa la mayoría del tráfico web actual
• Fuerza a pensar en lo esencial primero
• Generalmente resulta en CSS más eficiente y ligero

Consideraciones sobre unidades de medida

Al definir los puntos de ruptura con min-width y max-width, podemos usar diferentes unidades:

/* Usando píxeles (más común) */
@media (min-width: 768px) { /* ... */ }

/* Usando em (relativo al tamaño de fuente del elemento padre) */
@media (min-width: 48em) { /* 48em = 768px si el tamaño base es 16px */ }

/* Usando rem (relativo al tamaño de fuente del elemento raíz) */
@media (min-width: 48rem) { /* 48rem = 768px si el tamaño base es 16px */ }

Aunque los píxeles son más intuitivos y ampliamente utilizados, las unidades relativas como em y rem pueden ser más flexibles si el usuario cambia el tamaño de fuente base del navegador.

Ejemplo de menú responsive completo

Veamos un ejemplo más completo de un menú de navegación que se adapta a diferentes tamaños de pantalla:

/* Estilos base (móvil primero) */
.navbar {
  background-color: #333;
  padding: 15px;
}

.menu-toggle {
  display: block; /* Visible en móvil */
  color: white;
  font-size: 24px;
  cursor: pointer;
}

.nav-menu {
  display: none; /* Oculto por defecto en móvil */
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-menu.active {
  display: block; /* Se muestra cuando tiene la clase active */
}

.nav-item {
  margin: 10px 0;
}

.nav-link {
  color: white;
  text-decoration: none;
  display: block;
  padding: 5px 0;
}

/* Tablet y escritorio */
@media (min-width: 768px) {
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
  }
  
  .menu-toggle {
    display: none; /* Ocultar botón en pantallas grandes */
  }
  
  .nav-menu {
    display: flex; /* Siempre visible en pantallas grandes */
  }
  
  .nav-item {
    margin: 0 15px;
  }
  
  .nav-link {
    padding: 20px 0;
  }
}

Este código crea un menú que:

• En móviles: muestra un botón de hamburguesa que al hacer clic mostraría el menú vertical
• En tablets y escritorio: muestra un menú horizontal completo sin botón de hamburguesa

Buenas prácticas al usar min-width y max-width

• Evita superposiciones: Ten cuidado de no crear rangos que se superpongan, lo que podría causar conflictos de estilos.

/* Incorrecto: hay superposición en 768px */
@media (max-width: 768px) { /* ... */ }
@media (min-width: 768px) { /* ... */ }

/* Correcto: no hay superposición */
@media (max-width: 767px) { /* ... */ }
@media (min-width: 768px) { /* ... */ }

• Limita el número de breakpoints: Intenta mantener un número razonable de puntos de ruptura (3-5 suele ser suficiente) para evitar complejidad innecesaria.

• Prueba en dispositivos reales: No confíes solo en el redimensionamiento del navegador; prueba en dispositivos reales siempre que sea posible.

• Considera el contenido: Los breakpoints deberían basarse en dónde el diseño se rompe según el contenido, no en dispositivos específicos.

Las consultas basadas en ancho con min-width y max-width son herramientas fundamentales para crear diseños web adaptables que funcionen bien en todo el espectro de dispositivos, desde pequeños smartphones hasta grandes monitores de escritorio.

Operadores lógicos: and, not, only y separación con comas

Las media queries no se limitan a condiciones simples. Para crear reglas más específicas y flexibles, CSS ofrece varios operadores lógicos que permiten combinar o modificar condiciones. Estos operadores son fundamentales para crear diseños responsive sofisticados que respondan a escenarios complejos.

Operador and

El operador and permite combinar múltiples condiciones, aplicando los estilos solo cuando todas las condiciones especificadas se cumplen simultáneamente. Es el equivalente lógico a la operación "Y".

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .container {
    width: 90%;
    margin: 0 auto;
  }
}

En este ejemplo, los estilos se aplicarán únicamente cuando:

1. El dispositivo sea una pantalla (screen)
2. El ancho de la ventana sea al menos 768px
3. El ancho de la ventana no supere los 1024px

Este operador es especialmente útil para dirigirse a rangos específicos de tamaños de pantalla o para combinar diferentes tipos de características.

/* Estilos para tablets en orientación horizontal con alta resolución */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (min-resolution: 2dppx) {
  .high-res-image {
    background-image: url('image-hd.jpg');
  }
}

Operador not

El operador not niega toda la consulta, aplicando los estilos solo cuando la condición especificada no se cumple. Actúa como un operador de negación lógica.

@media not print {
  .screen-only-element {
    display: block;
  }
}

Este ejemplo muestra elementos con la clase .screen-only-element en todos los medios excepto cuando se está imprimiendo.

Es importante entender que not se aplica a toda la media query, no solo a una parte. Si necesitas negar solo una condición específica, deberás reorganizar tu consulta:

/* Incorrecto: not solo afecta a screen, no a (max-width: 768px) */
@media not screen and (max-width: 768px) { /* ... */ }

/* Correcto: negando toda la consulta */
@media not (screen and (max-width: 768px)) { /* ... */ }

Operador only

El operador only se utiliza principalmente para ocultar la media query de navegadores antiguos que no soportan media queries con características. No afecta a los navegadores modernos.

@media only screen and (min-width: 768px) {
  .modern-feature {
    display: flex;
  }
}

Los navegadores antiguos que no reconocen media queries con características ignorarán toda la regla si ven la palabra only. Los navegadores modernos simplemente la ignoran y procesan la consulta normalmente.

Este operador era más relevante hace años, pero sigue siendo parte de la especificación y ocasionalmente se utiliza por compatibilidad con navegadores muy antiguos.

Separación con comas (operador OR)

La separación con comas funciona como un operador lógico OR, permitiendo aplicar los mismos estilos cuando cualquiera de las condiciones separadas por comas se cumple.

@media screen and (max-width: 600px), screen and (orientation: portrait) {
  .navigation {
    flex-direction: column;
  }
}

En este ejemplo, el menú de navegación se mostrará en columna cuando:

• La pantalla tenga un ancho máximo de 600px O
• El dispositivo esté en orientación vertical (portrait)

Esta técnica es extremadamente útil para aplicar los mismos estilos en diferentes escenarios sin tener que duplicar código:

/* Aplicar estilos tanto para impresión como para pantallas pequeñas */
@media print, screen and (max-width: 480px) {
  .large-table {
    font-size: 10px;
  }
  
  .secondary-content {
    display: none;
  }
}

Combinando operadores para consultas complejas

Los operadores lógicos pueden combinarse para crear consultas altamente específicas:

@media screen and (min-width: 768px) and (max-width: 1024px), 
       print and (min-resolution: 300dpi) {
  .content {
    margin: 2em;
    line-height: 1.5;
  }
}

Este ejemplo aplica los estilos cuando:

• Es una pantalla entre 768px y 1024px de ancho O
• Es una impresora con resolución de al menos 300dpi

Ejemplo práctico: Menú adaptable con operadores lógicos

Veamos un ejemplo más completo de un menú que se adapta a diferentes contextos utilizando varios operadores lógicos:

/* Estilos base del menú */
.main-nav {
  background-color: #2c3e50;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Menú horizontal para pantallas medianas y grandes */
@media screen and (min-width: 768px) {
  .nav-list {
    display: flex;
    justify-content: space-around;
  }
  
  .nav-item {
    padding: 15px;
  }
  
  .mobile-menu-toggle {
    display: none;
  }
}

/* Menú vertical para pantallas pequeñas o dispositivos táctiles */
@media screen and (max-width: 767px), screen and (hover: none) {
  .nav-list {
    display: none;
    flex-direction: column;
  }
  
  .nav-list.active {
    display: flex;
  }
  
  .nav-item {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  
  .mobile-menu-toggle {
    display: block;
    padding: 15px;
    color: white;
    cursor: pointer;
  }
}

/* Ocultar menú en impresión */
@media not screen {
  .main-nav {
    display: none;
  }
}

/* Ajustes específicos para pantallas de alta densidad en modo oscuro */
@media screen and (min-resolution: 2dppx) and (prefers-color-scheme: dark) {
  .main-nav {
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
  }
}

Este ejemplo muestra cómo:

1. Usar and para aplicar estilos a pantallas de cierto tamaño
2. Usar comas como OR para aplicar los mismos estilos en diferentes condiciones
3. Usar not para excluir ciertos medios
4. Combinar múltiples condiciones para escenarios muy específicos

Consideraciones sobre el rendimiento

Al trabajar con operadores lógicos en media queries, es importante considerar el rendimiento:

• Especificidad: Las media queries no aumentan la especificidad de los selectores, pero pueden hacer que el CSS sea más complejo.

• Organización: Agrupar media queries con las mismas condiciones puede mejorar la legibilidad y mantenimiento:

/* Menos eficiente: media queries dispersas */
.header { /* estilos base */ }
@media (max-width: 768px) { .header { /* estilos móvil */ } }

.footer { /* estilos base */ }
@media (max-width: 768px) { .footer { /* estilos móvil */ } }

/* Más eficiente: media queries agrupadas */
.header { /* estilos base */ }
.footer { /* estilos base */ }

@media (max-width: 768px) {
  .header { /* estilos móvil */ }
  .footer { /* estilos móvil */ }
}

• Complejidad: Evita crear consultas excesivamente complejas que sean difíciles de entender y mantener. Si una media query tiene demasiadas condiciones, considera dividirla en partes más manejables.

Compatibilidad con navegadores

La mayoría de los navegadores modernos soportan todos estos operadores lógicos, pero es importante tener en cuenta:

• El operador not y las consultas con múltiples condiciones pueden comportarse de manera inesperada en navegadores muy antiguos.
• Algunos dispositivos o navegadores pueden interpretar de manera diferente ciertas características de medios.
• Siempre es recomendable probar las media queries en diferentes dispositivos y navegadores.

Los operadores lógicos en media queries proporcionan la flexibilidad necesaria para crear diseños web verdaderamente adaptables que respondan no solo al tamaño de la pantalla, sino también a otras características del dispositivo y preferencias del usuario.

Breakpoints comunes y estrategias para determinarlos

Los breakpoints son puntos específicos en el ancho de la pantalla donde el diseño de nuestra web cambia para adaptarse mejor al tamaño del dispositivo. Elegir los breakpoints adecuados es fundamental para crear experiencias responsive efectivas que funcionen bien en todo el espectro de dispositivos.

Breakpoints estándar en la industria

Aunque no existe un conjunto universal de breakpoints que funcione para todos los proyectos, la industria ha establecido algunos puntos de referencia comunes basados en categorías generales de dispositivos:

• 320-480px: Smartphones en posición vertical
• 481-768px: Smartphones en posición horizontal y tablets pequeñas
• 769-1024px: Tablets en posición horizontal y laptops pequeñas
• 1025-1200px: Laptops y monitores de escritorio
• 1201px y superior: Monitores grandes y pantallas de alta resolución

Un enfoque simplificado y ampliamente utilizado define estos breakpoints principales:

/* Móviles pequeños */
/* Los estilos base, sin media query */

/* Móviles grandes y tablets pequeñas */
@media (min-width: 576px) {
  /* Estilos para dispositivos con ancho ≥ 576px */
}

/* Tablets y laptops pequeñas */
@media (min-width: 768px) {
  /* Estilos para dispositivos con ancho ≥ 768px */
}

/* Laptops y monitores pequeños */
@media (min-width: 992px) {
  /* Estilos para dispositivos con ancho ≥ 992px */
}

/* Monitores grandes */
@media (min-width: 1200px) {
  /* Estilos para dispositivos con ancho ≥ 1200px */
}

/* Pantallas extra grandes */
@media (min-width: 1400px) {
  /* Estilos para dispositivos con ancho ≥ 1400px */
}

Estos valores son similares a los utilizados por frameworks populares como Bootstrap, lo que facilita la consistencia si trabajas con estas herramientas.

Enfoque basado en el contenido vs. basado en dispositivos

Existen dos filosofías principales para determinar breakpoints:

1. Enfoque basado en dispositivos

Este enfoque tradicional define breakpoints según las dimensiones de dispositivos populares:

/* iPhone SE */
@media (min-width: 375px) {
  /* Estilos específicos */
}

/* iPad */
@media (min-width: 768px) {
  /* Estilos específicos */
}

Desventajas:

• Los tamaños de dispositivos cambian constantemente
• Ignora la gran variedad de dispositivos en el mercado
• Puede llevar a un código difícil de mantener con demasiados breakpoints específicos

2. Enfoque basado en el contenido (recomendado)

Este enfoque moderno determina los breakpoints observando dónde el diseño "se rompe" naturalmente:

/* Ejemplo de breakpoint determinado por el contenido */
.card-container {
  display: flex;
  flex-direction: column;
}

/* Cuando hay suficiente espacio para mostrar cards en fila */
@media (min-width: 720px) {
  .card-container {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .card {
    width: calc(50% - 20px);
    margin: 10px;
  }
}

Ventajas:

• Se adapta mejor a las necesidades específicas del proyecto
• Crea una experiencia más fluida para los usuarios
• Generalmente resulta en menos breakpoints y código más limpio

Estrategias para determinar breakpoints efectivos

1. Diseño mobile-first

Comenzar con la versión móvil y añadir complejidad progresivamente:

/* Estilos base para móvil */
.navigation {
  display: flex;
  flex-direction: column;
}

/* Cuando hay suficiente espacio para un menú horizontal */
@media (min-width: 768px) {
  .navigation {
    flex-direction: row;
    justify-content: space-between;
  }
}

Esta estrategia:

• Prioriza el contenido esencial
• Mejora el rendimiento (menos CSS para descargar en dispositivos móviles)
• Sigue las tendencias actuales de uso de internet (mayoría de usuarios en móviles)

2. Prueba con contenido real

En lugar de usar un diseño con contenido de marcador, utiliza contenido real para identificar dónde el diseño necesita ajustes:

/* Ajuste específico para títulos largos en tarjetas */
@media (min-width: 600px) and (max-width: 800px) {
  .card-title {
    font-size: 18px;
    line-height: 1.2;
  }
}

3. Utiliza herramientas de desarrollo del navegador

Las herramientas de desarrollo modernas permiten:

• Simular diferentes tamaños de pantalla
• Visualizar el diseño en varios breakpoints
• Identificar problemas de diseño responsive

4. Breakpoints contextuales

En lugar de aplicar los mismos breakpoints a todo el sitio, considera breakpoints específicos para componentes:

/* Breakpoint general del sitio */
@media (min-width: 768px) {
  .container {
    padding: 0 30px;
  }
}

/* Breakpoint específico para la galería de imágenes */
@media (min-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

Implementación práctica: Sistema de breakpoints flexible

Veamos cómo implementar un sistema de breakpoints flexible y mantenible:

/* Variables CSS para breakpoints */
:root {
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

/* Sistema de grid responsive */
.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 576px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
}

/* Ajustes de tipografía responsive */
body {
  font-size: 16px;
  line-height: 1.5;
}

@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2.5rem;
  }
}

Este enfoque:

• Centraliza los valores de breakpoints como variables CSS
• Facilita la consistencia en todo el proyecto
• Permite ajustes rápidos si es necesario cambiar los breakpoints

Consideraciones para dispositivos modernos

Pantallas de alta densidad

Además del ancho, considera la densidad de píxeles para imágenes y elementos visuales:

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

Orientación del dispositivo

La orientación puede ser tan importante como el ancho:

/* Ajustes específicos para tablets en modo horizontal */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .hero-section {
    height: 80vh;
  }
}

Evitando errores comunes

1. Demasiados breakpoints

Un error frecuente es crear un breakpoint para cada dispositivo específico:

/* Evita esto: demasiados breakpoints específicos */
@media (min-width: 320px) { /* iPhone SE */ }
@media (min-width: 375px) { /* iPhone X/11/12 */ }
@media (min-width: 390px) { /* iPhone 12 Pro Max */ }
@media (min-width: 414px) { /* iPhone 8 Plus */ }

Solución: Agrupa dispositivos similares y enfócate en rangos más amplios.

2. Breakpoints demasiado rígidos

Otro error es crear diseños que solo se ven bien exactamente en los breakpoints definidos:

/* Problemático: cambios bruscos entre breakpoints */
.container {
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

Solución: Utiliza unidades flexibles y valores relativos:

/* Mejor: transiciones más suaves */
.container {
  width: 100%;
  max-width: 1200px;
  padding: 0 15px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .container {
    padding: 0 30px;
  }
}

3. Ignorar el espacio entre breakpoints

Muchos desarrolladores solo prueban exactamente en los breakpoints definidos:

Solución: Prueba redimensionando gradualmente el navegador para asegurar que el diseño se adapta fluidamente entre breakpoints.

Ejemplo completo: Página responsive con breakpoints estratégicos

/* Base styles (mobile first) */
.container {
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}

header {
  padding: 15px 0;
}

.logo {
  max-width: 150px;
}

.main-nav {
  display: none; /* Oculto en móvil */
}

.mobile-menu-toggle {
  display: block;
}

.hero {
  height: 300px;
}

.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* Tablets pequeñas (portrait) */
@media (min-width: 576px) {
  .hero {
    height: 350px;
  }
  
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablets y laptops pequeñas */
@media (min-width: 768px) {
  .container {
    padding: 0 30px;
  }
  
  header {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .main-nav {
    display: flex;
  }
  
  .mobile-menu-toggle {
    display: none;
  }
  
  .hero {
    height: 400px;
  }
}

/* Laptops y desktops */
@media (min-width: 992px) {
  .features {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  
  .hero {
    height: 500px;
  }
}

/* Pantallas grandes */
@media (min-width: 1200px) {
  .container {
    padding: 0 40px;
  }
  
  .features {
    grid-template-columns: repeat(4, 1fr);
  }
}

Este ejemplo muestra cómo:

• Comenzar con un diseño mobile-first
• Añadir complejidad progresivamente
• Utilizar breakpoints estratégicos para diferentes componentes
• Mantener un código limpio y organizado

Conclusión práctica

Al determinar breakpoints para tu proyecto:

1. Analiza tu contenido antes de decidir los breakpoints
2. Comienza con pocos breakpoints (3-4) y añade más solo si es necesario
3. Prueba en dispositivos reales siempre que sea posible
4. Considera componentes individuales en lugar de aplicar los mismos breakpoints a todo
5. Utiliza herramientas de desarrollo para identificar problemas y ajustar breakpoints

Recuerda que los breakpoints deben servir al contenido, no al revés. Un buen diseño responsive se adapta fluidamente a cualquier tamaño de pantalla, no solo a unos pocos tamaños predefinidos.