Curso de Frontend Developer

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

Este es una estructura para un diseño responsive (Mobile first) Hecho con dos herramientas
Aquí la estructura_ html_:
Captura de pantalla 2023-05-20 190031.png

Acá adjunto la primer parte del Css, utilicé Display:Flex, para la estructura en “Mobile First
Captura de pantalla 2023-05-20 190054.png

Por último, la parte final del Css, donde utilicé @media,para determinar el ancho minimo de la resolución y que así cambiara a escritorio al ser superada.
En éste caso en vez de utilizar Flex, hice la estructura con_ Display:Grid;_

El resultado final es el siguiente:
Mobile:
Captura de pantalla 2023-05-20 190730.png

Escritorio:

Captura de pantalla 2023-05-20 190656.png

Curso de Frontend Developer

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

0 Comentarios

para escribir tu comentario

Artículos relacionados