jairogarcíarincón

Ejercicio 3: Media-queries


395

Enunciado



Partiendo de la base del Ejercicio 2, modifica los estilos necesarios para que la maquetación sea responsive, con las siguientes especificaciones:

  • Debe tener 1920px de ancho máximo
  • Debe tener 375px de ancho mínimo
  • En pantallas grandes, las tarjetas 4 a 7 ocuparán la mitad de la pantalla cada una.
  • En pantallas medianas, cada una de las 7 tarjetas ocupará la mitad de la pantalla
  • En pantallas pequeñas y muy pequeñas, cada una de las 7 tarjetas ocupará la pantalla completa
  • En pantallas muy pequeñas, el color del texto será claro y todos los fondos de color serán oscuros.
  • Pregunta al profesor cualquier duda que te surja.


Solución



La solución al ejercicio las puedes encontrar en el siguiente enlace, y a continuación se muestran capturas de una posible solución al ejercicio:

03-media-queries

Pantallas muy grandes (Ejercicio 2 original)

03 Layout CSS con Grid y Flexbox
Fuente: Elaboración propia



Pantallas grandes

04 Media queries pantallas grandes
Fuente: Elaboración propia



Pantallas medianas

05 Media queries pantallas medianas
Fuente: Elaboración propia



Pantallas pequeñas

06 Media queries pantallas pequeñas
Fuente: Elaboración propia



Pantallas muy pequeñas

07 Media queries pantallas muy pequeñas
Fuente: Elaboración propia


Publicado el 21 de Noviembre de 2024

maquetacionwebresponsive flexboxgridangularmaterialmedia queries