Bases des media queries

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

Une requête média en CSS permet à un site web de s’adapter à différentes tailles d’écran en appliquant des styles en fonction de la largeur, de la hauteur ou d’autres propriétés de l’appareil.

Syntaxe de base des requêtes média :

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

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

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 comme la taille de l’écran, la résolution et bien d’autres. Voici quelques conditions courantes :

max-width : Limite les styles aux écrans dont la largeur maximale est définie (par exemple, max-width: 600px).
min-width : Applique des styles aux écrans dont la largeur minimale est définie (par exemple, min-width: 768px).

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

Ces conditions t’aident à contrôler l’apparence de ton site Web sur différents appareils et selon leur orientation.

Exemple :

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

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

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

Défi

Facile

On vous donne 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 adaptative. Suivez les étapes ci-dessous :

Ajoutez une requête @media pour les écrans dont la largeur maximale est de 600px :
- Définissez la couleur d’arrière-plan du corps en 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 dont la largeur minimale est de 601px et la largeur maximale de 1024px :
- Définissez la couleur d’arrière-plan du corps en 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 dynamiquement la mise en page.

Essayez vous-même

<html>
<head>
    <title>Media Queries Basics</title>
    <style>
    /* Write your code here */
        
    </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>