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.