Media queries — CSS: Fundamentos de Flex

• ¿Cómo se escriben?
• Casos comunes de uso
  • 📱 Orientación del dispositivo
  • Tamaño del viewport
• ¿Desktop First o Mobile First?
• ¿Puedo usarlos al conectar CSS?
• Combinaciones lógicas
  • and — Ambas condiciones deben cumplirse
  • , (coma) — Con que se cumpla una, es suficiente
  • not — Solo si no se cumple la condición

Imagina que diseñas un sitio web que se ve perfecto en tu laptop… pero cuando lo abres en un celular, ¡todo se rompe! 😩

Aquí es donde entran las media queries: una herramienta que nos permite adaptar los estilos CSS según el tamaño de pantalla del dispositivo. Así logramos que una página se vea bien en monitores, tablets o celulares.

¿Cómo se escriben?

Las media queries se usan así:

@media (condición) {
  /* Estilos que se aplican solo si la condición se cumple */
}

Por ejemplo:

@media (max-width: 600px) {
  body {
    background-color: pink;
  }
}

Este código hace que el fondo del sitio se vuelva rosado solo en pantallas pequeñas (de 600 píxeles de ancho o menos).

Casos comunes de uso

📱 Orientación del dispositivo

Puedes detectar si el dispositivo está en modo vertical (portrait) o horizontal (landscape):

@media (orientation: landscape) {
  body {
    background: white;
  }
}

@media (orientation: portrait) {
  body {
    background: black;
  }
}

🌟 Útil si el diseño cambia mucho según cómo el usuario sostiene el celular.

Tamaño del viewport

Es lo más usado. Así puedes cambiar los estilos según el ancho de la pantalla.

@media (max-width: 990px) {
  /* Estilos para pantallas de 990px o menos (tablets, celulares) */
}

Cuando defines varios puntos de quiebre (breakpoints), el diseño se adapta a distintos dispositivos:

@media (max-width: 1400px) { /* laptops grandes */ }
@media (max-width: 990px) { /* tablets */ }
@media (max-width: 770px) { /* celulares */ }

¿Desktop First o Mobile First?

Cuando escribes media queries, tienes que decidir: ¿Desde qué tipo de pantalla vas a comenzar tu diseño? Existen dos enfoques principales:

👉 Si estás empezando, te recomendamos usar Mobile First. Hoy en día, la mayoría de usuarios navega desde su celular, así que este enfoque tiene más sentido.

Ejemplo de enfoque Mobile First:

/* Estilos base para celulares */
body {
  font-size: 14px;
}

/* A partir de 770px (tablets o laptops) */
@media (min-width: 770px) {
  body {
    font-size: 16px;
  }
}

¿Puedo usarlos al conectar CSS?

Sí. También puedes aplicar media queries directamente al enlazar un archivo CSS en HTML:

<link rel="stylesheet" media="screen and (min-width: 750px)" href="grande.css">

Así ese archivo se carga solo si la pantalla mide al menos 750px.

Combinaciones lógicas

A veces necesitas que se cumplan varias condiciones a la vez o combinar opciones. Para eso existen tres operadores lógicos:

and — Ambas condiciones deben cumplirse

@media (orientation: portrait) and (min-width: 600px) {
  .caja {
    background-color: orange;
  }
}

👉 Esto se aplica solo si el dispositivo está en modo vertical y además tiene al menos 600px de ancho.

, (coma) — Con que se cumpla una, es suficiente

@media (max-width: 600px), (orientation: portrait) {
  .caja {
    background-color: yellow;
  }
}

👉 Aquí se aplican los estilos si el ancho es de 600px o menos o si el dispositivo está en modo vertical.

not — Solo si no se cumple la condición

@media not all and (orientation: landscape) {
  .caja {
    background-color: lightblue;
  }
}

👉 Se aplica solo si el dispositivo NO está en modo horizontal.

Materiales adicionales

1. MDN Web Docs 📚 Uso de media queries