Bases des media queries

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 65 sur 76.

Une media query en CSS permet à un site web de s’adapter à différentes tailles d’écran en appliquant des styles selon la largeur, la hauteur ou d’autres propriétés de l’appareil.

Syntaxe de base des media queries :

@media (condition) {  
    selector {  
        property: value;  
    }  
}

condition : La règle qui déclenche les styles (par exemple, max-width: 600px).
selector : Le ou les éléments HTML à styliser.

property : La propriété CSS à définir (par exemple, width, font-size).
value : La valeur attribuée à la propriété, qui change en fonction de la condition de la requête média.

Dans une requête média, la condition peut être basée sur divers facteurs tels que la taille de l’écran, la résolution, et bien plus encore. Voici quelques conditions courantes :

max-width : Limite les styles aux écrans ayant une largeur maximale (par exemple, max-width: 600px).
min-width : Applique les styles aux écrans ayant une largeur minimale (par exemple, min-width: 768px).

max-height : Limite les styles aux écrans dont la hauteur maximale est définie (par exemple, max-height: 400px).
min-height : Applique les styles aux écrans dont la hauteur minimale est définie (par exemple, min-height: 500px).

Ces conditions vous aident à contrôler l’apparence de votre site web sur différents appareils et selon différentes orientations.

Exemple :

@media (max-width: 600px) {  
  body { background-color: lightblue; }  
}

@media (min-width: 601px) and (max-width: 1024px) {
  body {background-color: lightgreen;}

Cela change la couleur d’arrière-plan en lightblue lorsque la largeur de l’écran est de 600px ou moins. Pour les écrans compris entre 601px et 1024px, la couleur d’arrière-plan sera lightgreen.

Défi

Facile

Vous disposez d’un document HTML avec un titre (<h1>), un paragraphe (<p>) et un <div>. Votre tâche consiste à ajouter des requêtes média pour rendre la page responsive. Suivez les étapes ci-dessous :

Ajoutez une requête @media pour les écrans d’une largeur maximale de 600px :
- Définissez la couleur d’arrière-plan du body sur bleu clair.
- Définissez la taille de police du titre (<h1>) sur 5vw (5 % de la largeur de la fenêtre d’affichage).
Ajoutez une requête @media pour les écrans d’une largeur minimale de 601px et d’une largeur maximale de 1024px :
- Définissez la couleur d’arrière-plan du body sur vert clair.
- Définissez la taille de police du titre (<h1>) sur 3vw (3 % de la largeur de la fenêtre d’affichage).

Redimensionnez la fenêtre du navigateur pour voir comment les requêtes média ajustent la mise en page dynamiquement.

Essayez vous-même

<html>
<head>
    <title>Media Queries Basics</title>
    <style>
    <!--Écrivez votre code ici-->
        
    </style>
</head>
<body>
    <h1>Whales: The Ocean Giants</h1>  
    <p>Whales are magnificent giants of the sea, famous for their intelligence and powerful songs. These gentle creatures face threats like hunting and pollution, making them vital to protect.</p>  
    <div>As ocean's true giants, whales help maintain the delicate balance of marine life.</div>  
</body>
</html>