Home | Clases | Introducción a las aplicaciones web con HTML5, CSS3 y Javascript | Diseño responsive con media-queries

Diseño responsive con 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;
}
}



Plantilla

A partir del ejemplo anterior, 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.


6. Crea una página web centrada de ancho máximo 1500px con las siguientes características:

  • Debe tener 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 (Puedes usar los textos e imágenes del Ejercicio 3).
  • 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 un padding de 20px 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 un texto de menú.
  • 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 10px a izquierda y derecha.
  • En todos los casos, modifica las fuentes e imágenes para que se adapten correctamente.
  • 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: 08/09/2019
Asignaturas: aplicaciones web
Temas: aplicaciones web
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