EasyCode365EasyCode365

Introducción al diseño responsive y media queries

El diseño responsive ayuda a que las páginas web funcionen en muchos tamaños de pantalla.

Las personas pueden visitar la misma página desde un teléfono, una tablet, una laptop o un monitor grande. Tu layout debe adaptarse para que la página siga siendo legible y fácil de usar.

Por qué el diseño responsive importa

Un layout con ancho fijo puede verse bien en una laptop, pero romperse en un teléfono.

Por ejemplo, una página de 1200px de ancho puede desbordar una pantalla pequeña y obligar al usuario a desplazarse horizontalmente.

El diseño responsive ayuda a evitar ese problema.

Las buenas páginas responsive suelen tener:

  • texto legible
  • botones fáciles de tocar
  • layouts que caben en la pantalla
  • imágenes que no se salen de sus contenedores

Qué significa diseño responsive

Diseño responsive significa escribir CSS que se adapta a diferentes tamaños de pantalla.

La página no necesita una versión completamente distinta para cada dispositivo. En su lugar, el mismo HTML puede cambiar su layout según cambia el espacio disponible.

Un layout responsive simple podría:

  • mostrar tarjetas en una columna en teléfonos
  • mostrar dos columnas en tablets
  • mostrar tres columnas en escritorios

Qué es una media query

Una media query es una regla CSS que aplica estilos solo cuando una condición es verdadera.

Esta es la sintaxis básica:

Solo lectura

En palabras simples, esto significa:

Si la pantalla mide al menos 768px de ancho, establece .card en width: 50%.

Si la pantalla es más estrecha que 768px, el navegador ignora los estilos dentro de esa media query.

Diseño mobile-first

Mobile-first significa escribir primero los estilos para pantallas pequeñas.

Estos estilos predeterminados no necesitan una media query.

Luego agregas media queries con min-width para pantallas más anchas.

Solo lectura

En este ejemplo, las tarjetas se apilan por defecto. A 768px y más ancho, se convierten en dos columnas.

Breakpoints

Un breakpoint es un ancho de pantalla donde el layout cambia.

Puntos de partida comunes son:

  • teléfonos: estilos predeterminados
  • tablets: alrededor de 768px
  • escritorios: alrededor de 1024px

Estos números no son reglas estrictas.

Agrega un breakpoint cuando tu layout lo necesite. Si la página empieza a sentirse apretada, estirada o difícil de leer, es una buena señal de que un breakpoint puede ayudar.

Usar min-width

La condición min-width significa “desde este ancho y más grande”.

Solo lectura

Esta regla se aplica solo cuando la pantalla mide 1024px de ancho o más.

min-width funciona bien para CSS mobile-first porque empiezas simple y agregas más layout solo cuando hay suficiente espacio.

Usar max-width

La condición max-width significa “hasta este ancho”.

Solo lectura

Esta regla se aplica solo cuando la pantalla mide 500px de ancho o menos.

max-width es útil a veces, pero para principiantes suele ser más fácil usar min-width en layouts mobile-first.

Ejemplo de layout responsive

Este ejemplo muestra el mismo HTML y CSS dentro de dos anchos de pantalla simulados.

El primer frame es estrecho como un teléfono. El segundo frame es más ancho, como una tablet pequeña o una pantalla más grande.

La demo usa breakpoints más pequeños que un layout real de página completa para que los cambios sean visibles dentro del área de preview de la lección.

Solo lectura
<div class="screen-demo">
  <div class="screen-panel">
    <p>Ancho móvil: 320px</p>
    <iframe
      title="Vista previa de layout móvil"
      class="phone-frame"
      srcdoc="<style>
        body {
          margin: 0;
          font-family: Arial, sans-serif;
        }

        .features {
          display: grid;
          gap: 16px;
          padding: 12px;
        }

        .card {
          padding: 24px;
          text-align: center;
          background-color: #dbeafe;
          border: 1px solid #2563eb;
        }

        @media (min-width: 400px) {
          .features {
            grid-template-columns: 1fr 1fr;
          }
        }

      </style>

      <div class='features'>
        <div class='card'>Característica 1</div>
        <div class='card'>Característica 2</div>
      </div>"
    ></iframe>
  </div>

  <div class="screen-panel">
    <p>Ancho tablet: 480px</p>
    <iframe
      title="Vista previa de layout en tablet"
      class="tablet-frame"
      srcdoc="<style>
        body {
          margin: 0;
          font-family: Arial, sans-serif;
        }

        .features {
          display: grid;
          gap: 16px;
          padding: 12px;
        }

        .card {
          padding: 24px;
          text-align: center;
          background-color: #dbeafe;
          border: 1px solid #2563eb;
        }

        @media (min-width: 400px) {
          .features {
            grid-template-columns: 1fr 1fr;
          }
        }

      </style>

      <div class='features'>
        <div class='card'>Característica 1</div>
        <div class='card'>Característica 2</div>
      </div>"
    ></iframe>
  </div>
</div>

<style>
  .screen-demo {
    display: grid;
    gap: 16px;
    font-family: Arial, sans-serif;
  }

  .screen-panel {
    overflow-x: auto;
  }

  .screen-panel p {
    margin: 0 0 8px;
    font-weight: bold;
  }

  iframe {
    height: 180px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: white;
  }

  .phone-frame {
    width: 320px;
  }

  .tablet-frame {
    width: 480px;
  }
</style>

En el frame de 320px, las tarjetas se apilan en una columna porque todavía no coincide ninguna media query.

En el frame de 480px, la query min-width: 400px coincide, así que las tarjetas cambian a dos columnas.

Hacer imágenes responsive

Las imágenes grandes pueden desbordar contenedores estrechos.

Esta pequeña regla ayuda a que las imágenes encajen dentro de su contenedor padre:

Solo lectura

max-width: 100% evita que la imagen sea más ancha que su contenedor.

height: auto mantiene correctas las proporciones de la imagen cuando se reduce.

Errores comunes de principiantes

  • Usar anchos fijos en píxeles para toda la página: un contenedor de 1200px puede desbordar en teléfonos. Usa anchos flexibles o max-width para contenedores grandes.
  • Escribir primero estilos de escritorio: suele ser más difícil deshacer un layout complejo de escritorio para móvil que empezar simple y agregar layouts más grandes después.
  • Agregar demasiados breakpoints: no escribas una media query para cada dispositivo. Agrega un breakpoint cuando el layout realmente lo necesite.
  • Olvidar probar pantallas estrechas: reduce el ancho de la ventana del navegador y comprueba que el texto, los botones y el layout todavía caben.

Mini práctica

Escribe una media query con min-width que cambie .menu de una columna a dos columnas en 768px.

Usa:

Solo lectura

Quiz corto con respuestas

  1. ¿Con qué ayuda el diseño responsive?
  2. ¿Qué significa min-width: 768px?
  3. ¿Por qué max-width: 100% es útil para imágenes?

Respuestas:

  1. Ayuda a que las páginas sigan siendo legibles y usables en diferentes tamaños de pantalla.
  2. Los estilos se aplican cuando la pantalla mide 768px de ancho o más.
  3. Evita que las imágenes se desborden de sus contenedores padre.

Respuesta de la mini práctica:

Solo lectura

Pequeño desafío

Intenta crear un grid responsive de productos.

  1. Convierte .product-grid en un grid.
  2. Agrega un 16px de gap.
  3. Mantén una columna por defecto.
  4. En 400px, cámbialo a dos columnas.
  5. En 600px, cámbialo a tres columnas.
Se puede editar
<div class="product-grid">
  <div class="item">Producto A</div>
  <div class="item">Producto B</div>
  <div class="item">Producto C</div>
  <div class="item">Producto D</div>
  <div class="item">Producto E</div>
  <div class="item">Producto F</div>
</div>

<style>
  .item {
    padding: 30px;
    text-align: center;
    font-family: Arial, sans-serif;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
  }

  .product-grid {
    /* 1. Convierte esto en un grid */

    /* 2. Agrega un gap de 16px */

    /* 3. Una columna es el valor por defecto, así que no necesitas una regla de columnas */
  }

  /* 4. En 400px, usa dos columnas */
  @media (min-width: 400px) {
    .product-grid {
    }
  }

  /* 5. En 600px, usa tres columnas */
  @media (min-width: 600px) {
    .product-grid {
    }
  }
</style>

Una posible respuesta:

Solo lectura

Resumen

  • El diseño responsive ayuda a que las páginas se adapten a diferentes tamaños de pantalla.
  • Las media queries aplican CSS solo cuando una condición es verdadera.
  • El CSS mobile-first empieza con estilos para pantallas pequeñas.
  • min-width aplica estilos desde un breakpoint y hacia arriba.
  • max-width aplica estilos hasta un breakpoint.
  • Los breakpoints deben basarse en las necesidades del layout.
  • Las imágenes responsive usan max-width: 100% y height: auto.