Conception web responsive | Tutoriel sur le site web Gulp.js

Introduction

Dans ce projet, vous allez apprendre à implémenter une mise en page responsive pour un site web, similaire au site officiel de Gulp.js. Vous utiliserez des requêtes média pour ajuster la mise en page et les styles de la page web en fonction de la taille de l'écran.

👀 Aperçu

aperçu de la mise en page responsive

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment ajouter des règles de requête média au fichier HTML pour créer une mise en page responsive
Comment ajuster la largeur et la visibilité des éléments de la page en fonction de différentes tailles d'écran
Comment tester la mise en page responsive en redimensionnant la fenêtre du navigateur

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Implémenter une conception web responsive en utilisant des requêtes média
Ajuster la mise en page et les styles en fonction de la taille de l'écran
Tester et optimiser efficacement les pages web pour différents appareils et résolutions d'écran

Configurer le projet

Dans cette étape, vous allez configurer le projet et ouvrir les fichiers dans l'éditeur.

Ouvrez le dossier du projet, qui contient les fichiers et les dossiers suivants :

├── css
├── imgs
├── js
└── index.html

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement pour voir la page.

Bouton Go Live de WebIDE

Maintenant, vous pouvez voir la page statique du site web Gulp, qui n'est pas encore responsive. Changez manuellement la taille de la fenêtre et vous verrez l'effet suivant.

Mise en page de la page web non responsive

Ajouter des requêtes média

Dans cette étape, vous allez apprendre à ajouter des requêtes média au fichier HTML pour rendre la page responsive.

Ouvrez le fichier index.html dans l'éditeur de code.
Trouvez la première section <style> dans l'<head> du document.
Ajoutez la règle de requête média suivante sous /* TODO */ dans <style> :

/* TODO */
@media screen and (max-width: 1400px) {
  nav.content,
  main section {
    width: 900px !important;
  }
}

@media screen and (max-width: 900px) {
  nav.content,
  main section {
    width: 700px !important;
  }
}

@media screen and (max-width: 650px) {
  main section,
  main ul li {
    width: 100% !important;
  }

  nav.content.list {
    display: none;
  }

  nav.content.menu {
    display: block;
    position: absolute;
    right: 10px;
  }

  main ul li:nth-child(even) {
    margin-left: 0 !important;
  }
}

Ces requêtes média appliqueront des styles spécifiques à la page en fonction de la largeur de l'écran. La première requête média définit la largeur du contenu et de la section principale sur 900px lorsque la largeur de l'écran est inférieure ou égale à 1400px. La deuxième requête média définit la largeur sur 700px lorsque la largeur de l'écran est inférieure ou égale à 900px. La troisième requête média masque la liste de navigation, affiche une icône de menu et définit la largeur de la section principale et des éléments de liste sur 100% lorsque la largeur de l'écran est inférieure ou égale à 650px.

Tester la mise en page responsive

Dans cette étape, vous allez tester la conception responsive et apporter tout raffinement nécessaire.

Enregistrez le fichier index.html.
Raffraîchissez la page web dans le navigateur.
Redimensionnez la fenêtre du navigateur à différentes largeurs pour voir les changements de mise en page responsive.
Vérifiez que la mise en page de la page correspond aux résultats attendus montrés dans les images fournies.

À ce stade, vous avez terminé l'implémentation de la mise en page responsive pour le site web de Gulp.js. La page devrait désormais s'adapter à différentes tailles d'écran selon les exigences.

Le résultat final pour le mobile est montré ci-dessous :

Effet terminé

Félicitations ! Vous avez réussi à implémenter une mise en page responsive pour le site web de Gulp.js.