formation-ti.org

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}

.left {
couleur de fond: #2196F3;
padding: 20px;
flottant: gauche;
width: 20%; /* La largeur est de 20%, par défaut */
}

.main {
couleur de fond: #f1f1f1;
padding: 20px;
flottant: gauche;
largeur: 60%; /* La largeur est de 60%, par défaut */
}

.right {
couleur de fond: #D74444;
padding: 20px;
flottant : gauche ;
width: 20%; /* La largeur est de 20%, par défaut */
}

/* Utilisez une requête média pour ajouter un point de rupture à 800px : */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* La largeur est de 100%, lorsque la fenêtre d'affichage est de 800px ou moins */
}
}
</style>
</head>
<body>

<h2>Requêtes de médias</h2>
<p>Redimensionnez la fenêtre du navigateur.</p>

<p>Assurez-vous d'atteindre le point d'arrêt à 800px lors du redimensionnement de ce cadre.</p>

<div class="left">
  <p>Menu de gauche</p>
</div>

<div class="main">
  <p>Contenu principal</p>
</div>

<div class="right">
  <p>Contenu de droite</p>
</div>

</body>

</html>