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 basés sur la largeur, la hauteur ou d'autres propriétés de l'appareil.

Syntaxe de base pour les Media Queries :

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

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

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

Dans une media query, la condition peut être basée sur divers facteurs tels que la taille de l'écran, la résolution, et plus encore. Certaines conditions courantes incluent :

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

max-height : Limite les styles aux écrans ayant une hauteur maximale (par ex., max-height: 400px).
min-height : Applique des styles aux écrans ayant une hauteur minimale (par ex., min-height: 500px).

Ces conditions vous aident à contrôler l'apparence de votre site Web sur différents appareils et 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 bleu clair lorsque la largeur de l'écran est de 600px ou moins. Pour les écrans entre 601px et 1024px, la couleur d'arrière-plan sera vert clair.

Défi

Facile

Vous recevez un document HTML avec un titre (<h1>), un paragraphe (<p>) et un <div>. Votre tâche consiste à ajouter des media queries pour rendre la page responsive. Suivez les étapes ci-dessous :

Ajoutez une requête @media pour les écrans avec une largeur maximale de 600px :
- Définissez la couleur d'arrière-plan du corps (body) sur "lightblue".
- Définissez la taille de la police 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 minimale de 601px et une largeur maximale de 1024px :
- Définissez la couleur d'arrière-plan du corps (body) sur "lightgreen".
- Définissez la taille de la 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 media queries ajustent la mise en page de manière dynamique.

Aide-mémoire

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

Syntaxe de base :

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

Conditions courantes :

max-width : Limite les styles aux écrans ayant une largeur maximale
min-width : Applique les styles aux écrans ayant une largeur minimale
max-height : Limite les styles aux écrans ayant une hauteur maximale
min-height : Applique les styles aux écrans ayant une hauteur minimale

Exemple :

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

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

Essayez vous-même

<html>
<head>
    <title>Media Queries Basics</title>
    <!--Écrivez votre code ici-->
    <style>
        
        
    </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>