CSS

Diseño adaptable

Media queries

Además de hacer diseños que se adaptan al espacio disponible, hay situaciones en las que es mejor tener un diseño con diferente disposición de los contenidos. Por ejemplo: para pantallas muy grandes o muy pequeñas, cuando el dispositivo está en una orientación diferente, si la pantalla es táctil, etc.

Para ello se utilizan "media queries" que aplican ciertas reglas CSS solo si se cumple la condición indicada: @media (condición) { reglas CSS ... }. Hay varias condiciones, las más utilizadas son min-width y max-width que consultan el ancho actual de la ventana gráfica de la página.

<body>
  <header class="cabecera">Cabecera</header>
  <article class="contenido">Contenido</article>
  <aside class="secciones">Secciones del sitio web</aside>
  <aside class="indice">Índice del contenido</aside>
  <footer class="pie">Pie de página</footer>
</body>
body {
  display: grid;
  grid-template-columns: 2fr 3fr 1fr;
  grid-template-areas:
    "header   header header"
    "sections main   index"
    "footer   footer footer";
  gap: 7px;
  padding: 12px;
  text-align: center;
  font: 12px sans-serif;
}
@media (max-width: 400px) {
  body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "sections"
      "index"
      "main"
      "footer";
  }
}
body * {
  padding: 10px;
}
.cabecera {
  background: tomato;
  grid-area: header;
}
.pie {
  background: lightgreen;
  grid-area: footer;
}
.contenido {
  text-align: left;
  background: deepskyblue;
  grid-area: main;
}
.secciones {
  background: gold;
  grid-area: sections;
}
.indice {
  background: hotpink;
  grid-area: index;
}

❓ Ejercicio: En el ejemplo anterior, localiza la "media query" e intenta explicar qué hace.

🔍 Nota: Para probar las media queries puedes modificar el ancho de la ventana del navegador manualmente o usar las herramientas para desarrolladores: Botón derecho ➜ "Inspeccionar" ➜ "Diseño adaptable" o "Barra de herramientas de dispositivos" (icono de móvil/tablet).