Diseño web responsivo | Disposición adaptable | Amigable con móviles

Introducción

En este proyecto, aprenderás a crear un diseño web responsivo que se adapte a diferentes tamaños de pantalla. El objetivo es desarrollar una página web que ofrezca una experiencia de usuario cómoda tanto para usuarios de escritorio como de móvil.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

Cómo configurar el diseño inicial para las secciones de menú y contenido
Cómo implementar el diseño responsivo utilizando consultas de medios
Cómo probar y perfeccionar el diseño responsivo para garantizar una experiencia sin problemas

🏆 Logros

Después de completar este proyecto, podrás:

Crear un diseño web responsivo que se adapte a diferentes tamaños de pantalla
Desarrollar una interfaz móvil amigable para el usuario, incluyendo un menú collapsible
Aplicar las mejores prácticas para probar e iterar en un diseño web responsivo

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css(("CSS")) -.-> css/ResponsiveandAdaptiveDesignGroup(["Responsive and Adaptive Design"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicConceptsGroup -.-> css/properties("Properties") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/AdvancedLayoutGroup -.-> css/flexbox("Flexbox") css/ResponsiveandAdaptiveDesignGroup -.-> css/media_queries("Media Queries") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("Mobile First Design") subgraph Lab Skills css/selectors -.-> lab-300113{{"Diseño web responsivo para todas las pantallas"}} css/properties -.-> lab-300113{{"Diseño web responsivo para todas las pantallas"}} css/box_model -.-> lab-300113{{"Diseño web responsivo para todas las pantallas"}} css/display_property -.-> lab-300113{{"Diseño web responsivo para todas las pantallas"}} css/flexbox -.-> lab-300113{{"Diseño web responsivo para todas las pantallas"}} css/media_queries -.-> lab-300113{{"Diseño web responsivo para todas las pantallas"}} css/mobile_first_design -.-> lab-300113{{"Diseño web responsivo para todas las pantallas"}} end

Configurar el proyecto

En este paso, configurarás el proyecto y abrirás los archivos en el editor.

Abre la carpeta del proyecto, que contiene los siguientes archivos y directorios:

├── css
│   └── style.css
├── images
│   ├── 1.png
│   └── 2.png
├─── js
│    └── jQuery.min.js
└─── index.html

Entre ellos:

index.html es la página principal.
css/style.css es el archivo donde se deben agregar los estilos.
js/jQuery.min.js es el archivo de la biblioteca jQuery.
images es la carpeta de imágenes.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualiza manualmente la página para ver el siguiente efecto en tu navegador:

Implementar el diseño responsivo

En este paso, aprenderás a implementar el diseño responsivo para la página web.

Agrega la siguiente regla CSS al final del archivo css/style.css:

@media (max-width: 800px) {
  .menu {
    height: 54px;
    line-height: 54px;
    margin-bottom: 25px;
  }

  .icon-menu {
    color: #a0a0a0;
    margin-left: 20px;
    display: inline-block !important;
  }

  .icon-menu:hover {
    color: white;
    cursor: pointer;
  }

  .collapse {
    display: none;
  }

  input[type="checkbox"]:checked ~ .collapse {
    display: flex;
    flex-direction: column;
    background-color: #252525;
  }

  .dropdown:hover ul {
    display: flex;
    flex-direction: column;
  }

  .row {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
  }

  .box {
    margin-bottom: 15px;
  }

  #tutorials img {
    margin: 0;
  }
}

Este código CSS configura el diseño responsivo para la página web. Incluye estilos para el diseño del lado móvil, incluyendo el botón de menú, el menú expandido y el diseño del contenido.

Los cambios principales son:

La altura y la altura de línea del menú se establecen en 54px para coincidir con el diseño móvil.
El botón de menú (.icon-menu) se muestra y se le da estilo.
La clase .collapse se utiliza para ocultar los elementos del menú por defecto y se muestra cuando se hace clic en el botón de menú.
Los estilos .row y .box se actualizan para mostrar el contenido en un diseño de una sola columna en el móvil.
El margen de la imagen #tutorials img se elimina para adaptarse al diseño móvil.

Guarda el archivo css/style.css y actualiza la página web. Ahora deberías ver el diseño responsivo en acción, con el diseño móvil mostrado cuando el ancho de pantalla es menor que 800px.

Probar y perfeccionar el diseño responsivo

En este paso, probarás el diseño responsivo y harás cualquier refinamiento necesario.

Abre la página web en tu navegador y cambia el tamaño de la ventana a diferentes anchos para asegurarte de que el diseño se ajuste correctamente.
Prueba la funcionalidad del botón de menú en el diseño móvil, asegurándote de que los elementos del menú se muestren cuando se hace clic en el botón.
Inspecciona el diseño del contenido en las vistas de escritorio y móvil, asegurándote de que las imágenes, el texto y el espaciado se vean bien.
Si encuentras algún problema o área de mejora, actualiza el CSS en el archivo css/style.css y actualiza la página para ver los cambios.

Recuerda, el diseño web responsivo es un proceso iterativo, así que no temas experimentar y perfeccionar el diseño hasta que estés satisfecho con los resultados.

El resultado final del móvil se muestra a continuación:

✨ Revisar Solución y Practicar

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.