CSS Media queries

¿Qué son las media queries?

Definición sencilla: Las Media Queries son reglas en CSS que permiten aplicar estilos específicos de forma condicional: según las características del dispositivo o tamaño de pantalla del usuario.

La importancia del viewport

El viewport es el área visible de una página web en el dispositivo del usuario. Es decir, lo que realmente se muestra en la pantalla sin hacer scroll.

En dispositivos móviles, el viewport puede ser mucho más pequeño que en pantallas de escritorio. Por eso es tan importante diseñar pensando en él: es la referencia sobre la cual se aplican media queries y unidades como vw (viewport width) o vh (viewport height).

Como ya sabes:

• 1vw equivale al 1% del ancho del viewport.
• 1vh equivale al 1% de la altura del viewport.

¿Por qué necesitas media queries?

Ayudan a crear diseños responsivos (que responden) que se adapten a diferentes dispositivos (móviles, tablets, desktops).

Garantizan una mejor experiencia de usuario, independientemente del tamaño de la pantalla.

4 Sintaxis básica

@media (condición) {
  /* Styles to apply when the condition is met */
}

Ejemplo básico: Cambiar estilos según el ancho de la pantalla

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

/* Styles for viewports equal or lower than 768px */
@media (max-width: 768px) {
  body {
    font-size: 24px;
    background-color: gray;
  }
}

Principales tipos de condiciones

• max-width: Aplica estilos cuando el ancho de la pantalla es menor o igual a un valor.

  body {
    background-color: white;
  }
  
  @media (max-width: 768px) {
    body {
      background-color: lightgray;
    }
  }
  

• min-width: Aplica estilos cuando el ancho de la pantalla es mayor o igual a un valor.

  .container {
    font-size: 16px;
  }
  
  @media (min-width: 1024px) {
    .container {
      font-size: 20px;
    }
  }
  

• max-height: Aplica estilos cuando la altura del viewport es menor o igual a un valor.

  • Ejemplo: @media (max-height: 500px).

• min-height: Aplica estilos cuando la altura del viewport es mayor o igual a un valor.

  • Ejemplo: @media (min-height: 700px).

• orientation: Detecta si el dispositivo está en modo vertical (portrait) u horizontal (landscape).

  body {
    font-size: 14px;
  }
  
  @media (orientation: landscape) {
    body {
      font-size: 24px;
    }
  }
  

• aspect-ratio: Aplica estilos según la proporción entre ancho y alto del viewport.

  .wrapper {
    padding: 1rem;
  }
  
  @media (aspect-ratio: 16/9) {
    .wrapper {
      padding: 4rem;
    }
  }
  

• resolution: Útil para diferenciar pantallas normales de pantallas retina o de alta densidad.

  .logo {
    background-image: url('logo.png');
  }
  
  @media (min-resolution: 2dppx) {
    .logo {
      background-image: url('logo@2x.png');
    }
  }
  

• hover y pointer: Detecta si el dispositivo soporta hover (como los ordenadores) o si el puntero es preciso (como el ratón).

  • Ejemplo: @media (hover: hover) and (pointer: fine).

Media types

Las Media Queries no solo se pueden basar en dimensiones, también pueden aplicar estilos según el tipo de medio (media type).

Media type all.

• Tipo por defecto. Se aplica a todos los dispositivos.

Media type screen.

• Dispositivos con pantallas (móviles, ordenadores, etc).

Media type print.

• Estilos aplicados al imprimir o en vista de impresión.

Media type speech.

• Lectores de pantalla que interpretan contenido de forma auditiva.

/* Print media type example */
@media print {
  .navigation,
  .footer {
    display: none;
  }

  body {
    font-size: 12pt;
    color: black;
    background: white;
  }
}

Combinando condiciones

Puedes combinar múltiples condiciones con and, not o only.

/* This block will only be applied in landscape oriented viewports lower than 769px */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .layout {
    padding: 2rem;
  }
}

Buenas prácticas

• Usa min-width en lugar de max-width cuando trabajes con Mobile First. Así aplicas estilos a medida que la pantalla crece.
• Agrupa Media Queries junto con los estilos base del componente o sección que modifican. Evita tener todas al final del archivo.
• Evita usar valores fijos de anchura cuando puedas. Usa %, vw, vh o max-width para que el diseño sea más fluido.
• Prueba tus diseños en distintos dispositivos y también con la herramienta de responsive preview de los navegadores (DevTools).

Ejemplo “mobile first”

Una buena práctica es comenzar con estilos para móviles y luego ir añadiendo mejoras progresivas a medida que aumenta el ancho de pantalla. A esto se le llama Mobile First.

Este enfoque garantiza que incluso los dispositivos más pequeños reciban una experiencia usable por defecto.

<div class="card">
  <img class="card-image" src="https://via.placeholder.com/600x300" alt="Placeholder">
  <div class="card-content">
    <h2 class="card-title">Responsive Card</h2>
    <p class="card-text">This card adapts to screen size, resolution and orientation using media queries.</p>
  </div>
</div>

.card {
  max-width: 600px;
  margin: 2rem auto;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  font-family: sans-serif;
}

.card-image {
  width: 100%;
  height: auto;
  display: block;
}

.card-content {
  padding: 1.5rem;
}

.card-title {
  margin-top: 0;
  font-size: 1.5rem;
}

.card-text {
  color: #555;
  font-size: 1rem;
}

/* Responsive Font Size */
@media (max-width: 768px) {
  .card-title {
    font-size: 1.75rem;
  }

  .card-text {
    font-size: 0.95rem;
  }
}

/* Layout tweaks in landscape */
@media (orientation: landscape) and (max-width: 768px) {
  .card {
    position: relative;
  }

  .card-content {
    padding: 1rem;
    position: absolute;
    width: 100%;
    bottom: 0;
    color: white;
    background-color: rgba(0, 0, 0, 0.7)
  }

  .card-text {
    color: inherit;
  }
}

/* High-resolution image for retina */
@media (min-resolution: 2dppx) {
  .card-image {
    content: url('https://picsum.photos/1200/600'); /* Retina version */
  }
}

Enlaces útiles

• MDN: Media query fundamentals.