Introducción

Según Mozilla Developer Network, una media query consiste en un tipo de medio y al menos una consulta que limita las hojas de estilo utilizando características del medio como ancho, alto y color.

Se entiende como un módulo CSS3 que permite adaptar la representación del contenido a características del dispositivo, lo que se conoce diseño líquido o responsive.

Sintaxis

La sintaxis de las media queries consisten de un media type y una o mas expresiones, implicando características del medio, la cual se resuelve como verdadera o falsa. El resultado de la consulta es verdadera si el tipo de medio especificado en el media query concuerda con el tipo de dispositivo que está siendo mostrado y todas las expresiones en el media query son verdaderas.

/* para dispositivos cuya anchura de pantalla sea inferior a 768px la clase menu estará oculta */

@media (max-width: 768px) {

  .menu {

    display: none;

  }

}

Se pueden redactar queries utilizando operadores lógicos, incluyendo not, and, y only.

/* para dispositivos cuya anchura de pantalla a renderizar sea superior a 768px  */

@media (min-width: 768px) { ... }



/* para dispositivos cuya anchura de pantalla (sea o no la que se va a renderizar) sea superior a 768px  */

@media (min-device-width: 768px) { ... }



/* para dispositivos cuya anchura de pantalla  a renderizar sea superior a 768px y en orientación horizontal (apaisada) */

@media (min-width: 768px) and (orientation: landscape) { ... }



/* para dispositivos cuya anchura de pantalla  a renderizar sea superior a 768px y en orientación vertical */

@media (min-width: 768px) and (orientation: portrait) { ... }



/* para tvs cuya anchura de pantalla  a renderizar sea superior a 1920px y en orientación horizontal (apaisada) */

@media tv and (min-width: 1920px) and (orientation: landscape) { ... }



/* para dispositivos con al menos 256 colores */

@media all and (min-color-index: 256) { ... }



/* para dispositivos en color */

@media not monochrome { ... }



/* para pantallas cuya relación de aspecto sea al menos cuadrada */

@media screen and (min-aspect-ratio: 1/1) { ... }



/* para pantallas cuya relación de aspecto sea de 16/9 */

@media screen and (device-aspect-ratio: 16/9) { ... }

Plantilla

A partir de los ejemplos anteriores, en la práctica podríamos definir dos plantillas básicas de media-queries para desarrollar prácticamente cualquier proyecto web. Estos valores de breakpoint coinciden además con los utilizados por Bootstrap, como veremos más adelante.

Pantilla 1: Diseño responsive a partir del diseño más grande (el de escritorio)

//Pantallas muy grandes  (desktops de más de 1200px de ancho)

//No hace falta media-query porque será nuestro diseño por defecto



//Pantallas grandes (desktops de menos de 1200px)

@media (max-width: 1199.98px) { ... }



//Pantallas medianas (tablets de menos de 992px)

@media (max-width: 991.98px) { ... }



//Pantallas pequeñas (móviles en landscape de menos de 768px)

@media (max-width: 767.98px) { ... }



//Pantallas muy pequeñas (móviles en portrait de menos de 576px)

@media (max-width: 575.98px) { ... }

Pantilla 2: Diseño responsive a partir del diseño más pequeño (el de móvil)

//Pantallas muy pequeñas  (móviles en portrait de menos de 576px)

//No hace falta media-query porque será nuestro diseño por defecto



//Pantallas pequeñas (móviles en landscape de más de 576px)

@media (min-width: 576px) { ... }



//Pantallas medianas (tablets de más de 768px)

@media (min-width: 768px) { ... }



//Pantallas grandes (desktops de más de 992px)

@media (min-width: 992px) { ... }



//Pantallas muy grandes (desktops de más de 1200px)

@media (min-width: 1200px) { ... }

No obstante, es posible (y se debe) incluir tantos breakpoints como sean necesarios para ajustar nuestro diseño.


Ejercicio propuesto:

• Crea una página web centrada de ancho 1400px con 2 fuentes de Google Fonts (título y cuerpo), con cajas con fondo de colores: header, nav, section a la izquierda al 70%, aside a la derecha al 30% y footer.
• Añade al header un logo a la izquierda, un título y un subtítulo.
• Añade al nav 8 ítems de menú en línea.
• Añade a la section 8 articles con foto a la izquierda, título, subtítulo y texto que se muestren en pantalla de dos en dos.
• Añade al aside un buscador y tres banners tipo anuncio.
• Añade al footer 2 líneas de texto.
• En pantallas grandes, la section debe ser del 60% y el aside del 40%.
• En pantallas grandes, la web debe tener en padding de 1em a izquierda y derecha
• En pantallas medianas, los articles pasan a ir uno debajo de otro, y la section y el aside son del 50%
• En pantallas pequeñas, el logo va encima centrado y el título y el subtítulo debajo (también centrados)
• En pantallas pequeñas, la section y los asides son del 100%
• En pantallas pequeñas, las imágenes de los articles pasan a ir encima y su título, subtítulo y texto debajo.
• En pantallas pequeñas, el menú desaparece y se muestra un icono o texto de menú que al hacer clic lo muestra de manera que aparece un item de menu debajo de otro.
• En pantallas muy pequeñas, las imágenes de los articles van de lado a lado (sin padding)
• En pantallas muy pequeñas, el padding de los textos debe ser de 0.5em a izquierda y derecha
• En todos los casos, modifica las fuentes e imágenes para que se adapten correctamente
• En todos los casos, fija el header y el menú (o botón de menú) para que aparezca siempre aunque hagamos scroll.
• Añade abajo a la derecha un botón de subir arriba del todo que aparece al hacer scroll.
• Añade una línea de progreso de scroll que aparece en pantallas pequeñas y muy pequeñas
• Modifica el header y el menú para que al hacer scroll se hagan más pequeños el logo y los textos
• EXTRA: Al hacer clic en el icono o texto de menú del paso 13, se debe mostrar el menú de manera que aparezca un item de menu debajo de otro.