Responsive - OnePage
Création d'une page responsive ( res-01 )
Dans cet exercice, on va créer une mise en page responsive pour une page d'accueil d'un site web.
Il faut utiliser les media queries pour rendre la mise en page adaptative sur différents appareils et tailles d'écran.
Objectif :
Créer une mise en page responsive pour une page d'accueil de site web, avec une navigation, un en-tête, un contenu principal et un pied de page.
Instructions
- Créer un fichier HTML nommé
index.htmlet un fichier CSS nomméstyles.css. - Structurer la page HTML avec une navigation, un en-tête, un contenu principal et un pied de page.
- Utiliser Flexbox pour organiser les éléments de la mise en page.
- Appliquer les styles de base à pour la mise en page (couleurs, polices, marges, etc.).
- Utiliser des media queries dans le fichier CSS pour rendre la mise en page adaptative sur différentes tailles d'écran.
- Tester la mise en page sur différents appareils et tailles d'écran pour s' assurer qu'elle s'adapte correctement.
HTML de base
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page d'Accueil</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">À Propos</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Titre Principal</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut velit magna.
</p>
<p> Pellentesque id luctus nulla, a iaculis massa. Curabitur pellentesque massa non volutpat feugiat. Etiam congue, augue sit amet tincidunt ultricies, lacus lacus accumsan purus, id condimentum libero nunc id tortor. Vivamus nec eros ex. Ut sit amet diam quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis hendrerit nisl, sit amet viverra tellus tempor vitae.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed non maximus nulla, ut dictum elit. Duis eros nunc, sagittis vitae ex non, varius consequat metus. Curabitur in congue elit. Nunc non dolor in felis auctor porta. Nunc rutrum justo sed velit ultricies, vitae fermentum tellus varius. Maecenas nec convallis ipsum. Mauris molestie turpis ut quam aliquam varius. Sed mattis egestas neque et tincidunt.</p>
<p>Nulla at nisi porttitor, fermentum est nec, malesuada justo. Pellentesque at odio porttitor, bibendum ex sit amet, pulvinar quam. Nunc ipsum nunc, rhoncus a libero a, fringilla pulvinar nunc. Mauris lacinia ipsum est, non convallis mauris ornare cursus. Suspendisse sagittis, nibh at tempus luctus, quam leo tristique est, a euismod odio lacus at purus. Vestibulum ex lorem, gravida in lacus quis, auctor tristique metus. Ut dui quam, feugiat sit amet varius sed, porttitor id massa. Pellentesque eget mauris vitae velit eleifend lobortis ac non elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eu ipsum feugiat, interdum dui venenatis, auctor ligula. Cras tempor lectus efficitur nulla consequat, nec dapibus orci rutrum. Nunc erat mauris, sodales quis scelerisque sit amet, posuere non urna. Praesent maximus ornare erat, vitae rhoncus eros iaculis vitae.</p>
</section>
</main>
<footer>
<p>© 2024 Mon Site Web</p>
</footer>
</body>
</html>
Visuel
En taille normal
Taille moyenne
Taille gsm
Solution
Etape 1
Définire la structure de notre page. A l'aide d'un crayon ou d'un outil comme excalidraw on va dessiner à quoi doit ressembler notre page.
On contaste que la structure de notre page est la même entre gsm et pc.
Cette structure se consititue d'un espace pour le menu puis du contenu generale et ensuite d'un bas de page.
Etape 2
Les balises html.
Pour notre structure on va traduire en html les éléments de notre page.
Le haut de la page avec son menu: header et ``nav` pour le menu
<header>
<nav>On ajouteras notre menu ici</nav>
</header>
Pour le contenu principal : main
Le bas de page est traduit en : footer
Ce qui nous donnes la structure suivante:
<header>
<nav>
</nav>
</header>
<main>
</main>
<footer>
</footer>
Etape 3
Un peux de css pour rendre les choses plus visible.
On va utiliser nos balises html comme selecteur css afin d'ajouter un début de style à notre page.
Les éléments header, main et footer vont chaqu'un avoir une couleur de fond différente.
header {
background-color: #76abae;
}
main {
background-color: #eeeeee;
}
footer {
background-color: #31363f;
}
Celà nous donne le résultat suivant
Etape 4
On va travailler sur le menu sans s'occuper du reste.
Notre menu contient différents éléments. On va crée une liste avec c'est titres ( Accueil, a propos, services, contact )
<header>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">À Propos</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
La structure est bonne mais c'est pas trés agréable. On ajoute un peux de css pour rendre celà plus lisible.
header {
background-color: #76abae;
padding: 17px; /* un peux d'espace intérieur */
}
nav ul {
list-style-type: none; /* on supprime le stype par defaut des listes */
margin: 0;
padding: 0;
}
nav ul li {
margin-right: 20px; /* on ajoute un peu d'espace à droite */
}
nav ul li a {
color: #222831; /* comme nos titre sont des balises a elles ont le style par défaut des liens ( bleu ). On change celà */
font-weight: bold;
text-decoration: none;
}
nav ul li a:hover {
color: #fff; /* on change la couleur du titre lors du survol de la souris */
}
On a un menu qui marche bien sur un ecran pc mais pour y voire clair on dessine rapidement notre menu en mode gsm et pc
Ici on constate une différence.
Afin d'afficher correctement le menu sur une gsm on va mettre chaque titre les uns à la suite des autres de haut vers le bas. De plus on va centrer chaque titre.
Le problème c'est qu'on à déjà un style pour notre menu, un style pour l'affichage sur grand ecran.
C'est le style par défaut qu'on à crée. Maintenant on veut ajouter un style différent pour notre affichage gsm.
Pour réussir celà on utilise une media-query. Elle va nous permettre de rajouter des regles css qui vont s'appliquer quand la condition de la media query est remplie.
C'est à dire lorsque notre largeur d'écran est inférieur à 768px.
@media screen and (max-width: 768px) {
header {
text-align: center; /* on centre le contenu au milieu */
}
nav ul {
display: block; /* notre list doit se comporter comme un block cad prendre toute le place disponible */
text-align: center;
}
nav ul li {
display: block; /* idem pour les éléments de notre liste ( les titres Accueil, A propos ... ) */
margin-bottom: 10px;
}
}
Maintenant lorsqu'on va redimensionner notre page et arrivé en dessous de 768px l'affichage de notre menu va changer.
Etape 5
On travail sur main.
En premier on le rend plus jolie sur l'affichage pc.
Pour ca on va laisser de la place à droite et à gauche en demandant à main de n'occuper qu'un pourcentage de l'espace.
Ensuite on laisse notre navigateur se débrouiller pour centrer main.
main {
width: 58%; /* on impose sa largeur */
padding: 20px;
margin-left: auto; /* on laisse au navigateur choisir la taille de l'espace à gauche */
margin-right: auto; /* idem mais à droite */
color: #222831;
}
Ainsi sur de nombreuse taille d'écrans notre contenu serat toujours centré et l'espace à droite et à gauche va varier selon l'espace disponible. Ca répond à pas mal de situation mais ne fonctionne pas sur un petit écran type gsm.
Sur un espace réduit avoir des marges à droite et à gauche nous fait perdre de la place.
On aimerais que le contenu, c'est à dire main, prennent plus de place.
@media screen and (max-width: 768px) {
main {
width: 77%;/* au lieu de prendre 58% de la place il va en prendre 77%*/
}
}
Pour les plus petits écran on ajoute une nouvelle media-query.
@media screen and (max-width: 480px) {
main {
padding: 10px;
width: 88%; /* main va occuper 88% de la place dispo */
}
}
On se retrouve avec une structure qui à un style par défaut et s'adapte à deux autres taille d'écrans.
L'html n'a pas changer, seul le css permet les adaptations.
Etape 6
Reste à travailler sur notre footer qui reste le même que l'on soit en grand ou petit écran.
On a juste besoin de centrer notre contenu.
footer {
background-color: #31363f;
color: #fff;
text-align: center;
padding: 10px 0;
}
Pas besoin de media query car il s'affiche correctement partout.
Etape 7
On ouvre sa console de debug ( sous chrome et navigateurs assimilé ) Clic droit et > outils de dévelopements -> inspecter.
Ainsi on va pouvoir redimensionner notre page et utiliser des dimensions prédéfinie pour tester le rendu sur différents GSM.
