Responsive Web Design - Media Queries

---

¿Qué es un media query?

Media query es una técnica CSS introducida en CSS3.

Utiliza la regla @media para incluir un bloque de propiedades CSS solo si una determinada condición es verdadera.

Ejemplo:

Si la ventana del navegador tiene 600px o menos, el color de fondo será azul claro:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Ver ejemplo

---

Agregar un breakpoint(punto de interrupción/quiebre)

Anteriormente, en este tutorial creamos una página web con filas y columnas, y responsive, pero no se veía bien en una pantalla pequeña.

Los media query pueden ayudar con esto. Podemos agregar un punto de quiebre donde ciertas partes del diseño se comportarán de manera diferente en cada lado del punto de interrupción.

Utilice un media query para agregar un punto de quiebre en 768px:

Ejemplo:

Cuando la pantalla (ventana del navegador) es más pequeña que 768px, cada columna debe tener un ancho del 100%:

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}

Ver ejemplo

---

Diseñe siempre primero para dispositivos móviles (mobile-first)

Mobile First significa diseñar primero para dispositivos móviles antes de diseñar para computadoras de escritorio o cualquier otro dispositivo (esto hará que la página se muestre más rápido en dispositivos más pequeños).

Esto significa que debemos realizar algunos cambios en nuestro CSS.

En lugar de cambiar los estilos cuando el ancho sea menor que 768px, deberíamos cambiar el diseño cuando el ancho sea mayor que 768px. Esto hará nuestro diseño Mobile First:

Ejemplo:

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {wi
dth: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Ver ejemplo

---

Otros breakpoints

Puedes agregar tantos puntos de interrupción como desees.

También insertaremos un punto de interrupción entre tabletas y teléfonos móviles.

Hacemos esto agregando una media query más (a 600px) y un conjunto de nuevas clases para dispositivos de más de 600px (pero más pequeños de 768px):

Ejemplo:

Tenga en cuenta que los dos conjuntos de clases son casi idénticos, la única diferencia es el nombre (col- y col-s-):

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Puede parecer extraño que tengamos dos conjuntos de clases idénticas, pero nos da la oportunidad en HTML de decidir qué sucederá con las columnas en cada punto de interrupción:

---

Ejemplo HTML

Para computadoras de escritorio

La primera y la tercera sección abarcarán 3 columnas cada una. La sección central abarcará 6 columnas.

Para tabletas

La primera sección abarcará 3 columnas, la segunda abarcará 9 y la tercera sección se mostrará debajo de las dos primeras secciones y abarcará 12 columnas:

Ejemplo:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

Ver ejemplo

---

Breakpoints típicos del dispositivo

Hay miles de pantallas y dispositivos con diferentes alturas y anchos, por lo que es difícil crear un punto de interrupción exacto para cada dispositivo. Para simplificar las cosas, podría dirigirse a cinco grupos:

Ejemplo:

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Ver ejemplo

---

Orientación: Portrait / Landscape

Los media query también se pueden utilizar para cambiar el diseño de una página según la orientación del navegador.

Puede tener un conjunto de propiedades CSS que solo se aplicarán cuando la ventana del navegador sea más ancha que su altura, la denominada orientación "horizontal":

Ejemplo:

La página web tendrá un fondo azul claro y la orientación está en modo horizontal:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Ver ejemplo

---

Ocultar elementos con media queries

Otro uso común de los media queries es ocultar elementos en diferentes tamaños de pantalla:

Ejemplo:

/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Ver ejemplo

---

Cambiar el tamaño de fuente con media queries

También puedes utilizar media queries para cambiar el tamaño de fuente de un elemento en diferentes tamaños de pantalla:

Ejemplo:

/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Ver ejemplo

---

Referencias

Para una descripción general más detallada sobre los media queries y características/expresiones, consulte @media_rule_css_reference.

---

Traducido con 💚 desde W3Schools.com