Éditeur Tryit de W3Schools

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.example {
padding: 20px;
couleur: blanc;
}
/* Appareils très petits (téléphones, 600px et moins) */
@media only screen and (max-width: 600px) {
.example {background: rouge;}
}

/* Petits appareils (tablettes en mode portrait et grands téléphones, 600px et plus) */
@media only screen and (min-width: 600px) {
.example {background: vert;}
}

/* Appareils moyens (tablettes en mode paysage, 768px et plus) */
@media only screen and (min-width: 768px) {
.example {background: blue;}
}

/* Grands appareils (ordinateurs portables/ordinateurs de bureau, 992px et plus) */
@media only screen and (min-width: 992px) {
.example {background: orange;}
}

/* Appareils extra larges (grands ordinateurs portables et de bureau, 1200px et plus) */
@media only screen and (min-width: 1200px) {
.example {background: rose;}
}
</style>
</head>
<body>

<h2>Points de rupture typiques des requêtes média</h2>
<p class="example">Redimensionnez la fenêtre du navigateur pour voir comment la couleur de fond de ce paragraphe change selon les différentes tailles d'écran.</p>

</body>

</html>