Bases des Media Queries

Fait partie de la section Styling with 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 en fonction de la largeur, de 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 media, la condition peut être basée sur différents facteurs comme la taille de l’écran, la résolution, et bien plus encore. Voici quelques conditions courantes :

max-width : Limite les styles aux écrans d’une largeur maximale (par exemple, max-width: 600px).
min-width : Applique les styles aux écrans d’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

On vous fournit un document HTML avec un titre (<h1>), un paragraphe (<p>) et un <div>. Votre tâche consiste à ajouter des requêtes multimédias pour rendre la page responsive. Suivez les étapes ci-dessous :

Ajoutez une requête @media pour les écrans avec une largeur max de 600px :
- Définissez la background color de body sur lightblue.
- Définissez la font size du titre (<h1>) sur 5vw (5 % de la largeur de la fenêtre d’affichage).
Ajoutez une requête @media pour les écrans avec une largeur min de 601px et une largeur max de 1024px :
- Définissez la background color de body sur lightgreen.
- Définissez la font size 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 multimédias ajustent dynamiquement la mise en page.

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>