Le Responsive Design est une approche du design web qui vise à rendre les pages web lisibles et utilisables sur une variété de dispositifs et de tailles d’écran, des petits téléphones mobiles aux grands écrans d’ordinateur.
Les Media Queries sont un outil clé pour le design responsive, car elles permettent d’appliquer différents styles CSS en fonction des caractéristiques du dispositif de visualisation.
Une media query en CSS adapte le style selon les caractéristiques de l’appareil, comme la taille de l’écran, l’orientation ou la résolution.
Exercice 1 :
body {
background-color: blue;
}
@media (max-width: 599px) {
body {
background-color: red;
}
}Il est préférable d’écrire les media queries à la fin du fichier CSS pour garder un code organisé.
à vous de tester avec l’exemple ci-dessus !
<!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</title>
</head>
<body>
<h1>Test des Media Queries</h1>
<p>Redimensionne la fenêtre pour voir la couleur changer !</p>
</body>
</html>
Exercice 2
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.colonne {
width: 25%;
padding: 20px;
box-sizing: border-box;
background-color: lightgray;
text-align: center;
}
@media (max-width: 599px) {
.colonne {
width: 100%;
background-color: aqua;
}
}
</style>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercice avec Container</title>
</head>
<body>
<div class="container">
<div class="colonne">accueil</div>
<div class="colonne">agenda</div>
<div class="colonne">à la une</div>
<div class="colonne">contact</div>
</div>
</body>
</html>