jairogarcíarincón

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.

---

Publicado el 23 de Noviembre de 2024

aplicacionesweb