Home | Clases | Uso de estilos y diseño responsive | Media-queries

Media-queries


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.

Fecha de publicación: 05/09/2019
Asignaturas: diseño de interfaces web
Temas: css3 css responsive media-query
Utilizamos cookies propias y de terceros para mejorar su experiencia en la navegación. Al seguir navegando entendemos que acepta su uso.
Si lo desea, consulte nuestras políticas de privacidad y cookies
ENTENDIDO
[X] Cerrar

Contacta conmigo


[X] Cerrar

Acceso alumnos