Il s’agit de commencer avec les styles de base pour les petits écrans. Voici la feuille de style css que nous nommerons : style-mobile.css
/* Écran moyen (mobile-first) */
body {
font-size: 14px;
max-width: 100%;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
/* Écran moyen (tablette) */
@media (min-width: 600px) {
body {
font-size: 16px;
background-color: #e0e0e0;
}
}
/* Écran large (ordinateur) */
@media (min-width: 1024px) {
body {
font-size: 18px;
max-width: 800px;
background-color: #dcdcdc;
}
}Explication :
- Par défaut, le site est adapté aux petits écrans (mobile-first).
- À partir de 600px (tablette), la taille de la police augmente et la couleur de fond change.
- À partir de 1024px (ordinateur), la police est encore plus grande et la largeur du contenu est limitée pour une meilleure lecture.
Cela permet de tester et observer les changements de styles selon la taille de l’écran.
Code HTML de la page que nous nommerons : mobile.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercice Media Queries CMOCP 2025</title>
</head>
<body>
<h1>Bienvenue dans cet exercice de responsive design</h1>
<p>Cette page s'adapte automatiquement en fonction de la taille de votre écran. Essayez de la redimensionner pour voir les changements !</p>
<img src="écran d'ordinateur.jpg" alt="Image d'exemple">
</body>
</html>image : écran d’ordinateur.jpg : 1072 X 1024 pixels poids 258 Ko —>pour le web—-> 600 pixels X 600 pixels poids 100 ko
