CSS - Queries médiatiques : Guide du débutant

Bonjour, futurs développeurs web ! Aujourd'hui, nous plongeons dans le monde passionnant des requêtes médiatiques CSS. En tant que votre professeur d'informatique du coin, je suis là pour vous guider dans cette aventure, étape par étape. Ne vous inquiétez pas si vous n'avez jamais codé auparavant - nous allons commencer par les bases et progresser pas à pas. Alors, prenez une tasse de café (ou de thé, si c'est votre truc), et c'est parti !

Qu'est-ce que les requêtes médiatiques ?

Avant de rentrer dans les détails, comprendre ce que sont les requêtes médiatiques. Imaginez que vous concevez un site web qui looks bien sur votre ordinateur. Mais que se passe-t-il lorsque quelqu'un le consulte sur son téléphone ? C'est là que les requêtes médiatiques deviennent utiles ! Elles permettent à votre site web de s'adapter à différentes tailles d'écran et appareils. C'est comme avoir un site web caméléon qui change son apparence en fonction de son environnement.

Syntaxe

Maintenant, regardons la syntaxe de base d'une requête médiatique :

@media mediatype and (condition) {
/* Les règles CSS vont ici */
}

Ne vous laissez pas intimider par cela ! Nous allons le décomposer :

• @media : Cela indique au navigateur "Eh, je vais définir quelques conditions !"
• mediatype : Cela spécifie le type de média que nous ciblons (nous couvrirons cela bientôt).
• and : C'est ainsi que nous combinons les conditions.
• (condition) : C'est où nous définissons nos conditions spécifiques.

Types de médias

Les types de médias indiquent au navigateur quel type d'appareil nous ciblons. Voici les principaux :

Type de média	Description
all	S'applique à tous les appareils
print	Pour les imprimantes
screen	Pour les écrans d'ordinateurs, tablettes et smartphones

Opérateurs logiques

Nous pouvons utiliser des opérateurs logiques pour créer des requêtes plus complexes :

Opérateur	Description
and	Combine plusieurs fonctionnalités médiatiques
not	Négate une requête médiatique
only	Applique les styles uniquement si toute la requête correspond
,	Combine plusieurs requêtes médiatiques

Type de média CSS - All

Le type de média all est comme un couteau suisse - il fonctionne pour tous les appareils. Voici un exemple :

@media all {
body {
background-color: lightblue;
}
}

Cela définit la couleur de fond en bleu clair pour tous les appareils. Simple, n'est-ce pas ?

Type de média CSS - Print

Le type de média print est parfait pour styliser vos pages web lorsque quelqu'un veut les imprimer. Voyons-le en action :

@media print {
body {
font-size: 12pt;
}
.no-print {
display: none;
}
}

Cela augmente la taille de la police pour une meilleure lisibilité et masque les éléments avec la classe no-print lors de l'impression.

Type de média CSS - Screen

Le type de média screen est probablement celui que vous utiliserez le plus souvent. Il s'agit de tout appareil basé sur un écran. Voici un exemple :

@media screen and (max-width: 600px) {
.menu {
width: 100%;
}
}

Cela fait prendre à la barre de menu la pleine largeur de l'écran lorsque la largeur de l'écran est de 600 pixels ou moins.

Type de média CSS - Avec une virgule

Nous pouvons cibler plusieurs types de médias en utilisant des virgules. C'est comme inviter plusieurs amis à une fête :

@media screen, print {
body {
line-height: 1.5;
}
}

Cela définit la hauteur de ligne pour les types de médias écran et impression.

Type de média CSS - Avec only

Le mot-clé only est comme un vigile à un club. Il garantit que les anciens navigateurs qui ne prennent pas en charge les requêtes médiatiques n'appliquent pas les styles :

@media only screen and (max-width: 600px) {
.container {
width: 100%;
}
}

Requêtes médiatiques CSS - Plage

Nous pouvons également spécifier des plages pour nos conditions :

@media screen and (min-width: 600px) and (max-width: 900px) {
.sidebar {
display: none;
}
}

Cela masque la barre latérale lorsque la largeur de l'écran est comprise entre 600px et 900px.

Fonctionnalités médiatiques

Les fonctionnalités médiatiques nous permettent de tester des caractéristiques spécifiques du device ou du navigateur de l'utilisateur. Voici quelques-unes courantes :

Fonctionnalité	Description
width	Largeur de la fenêtre
height	Hauteur de la fenêtre
aspect-ratio	Rapport entre la largeur et la hauteur
orientation	Paysage ou portrait
resolution	Densité en pixels de l'appareil

Créer une requête médiatique complexe

Mettons tout cela ensemble avec un exemple plus complexe :

@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
.grid {
display: flex;
flex-wrap: wrap;
}
.grid-item {
width: 50%;
}
}

Cela crée une mise en page à deux colonnes pour les écrans en mode paysage et dont la largeur est comprise entre 600px et 900px.

Requêtes médiatiques CSS - Combining Multiple Types or Features

Nous pouvons combiner plusieurs types ou fonctionnalités en utilisant l'opérateur and :

@media screen and (min-width: 600px) and (max-width: 900px), print and (max-width: 600px) {
.content {
font-size: 14px;
}
}

Requêtes médiatiques CSS - Tester plusieurs requêtes

Parfois, nous voulons appliquer des styles si plusieurs requêtes sont vraies. Nous utilisons des virgules pour cela :

@media (min-width: 600px), (orientation: landscape) {
.header {
position: sticky;
top: 0;
}
}

Inverser le sens d'une requête

Le mot-clé not nous permet d'inverser le sens d'une requête :

@media not all and (orientation: landscape) {
.sidebar {
float: left;
}
}

Améliorer la compatibilité avec les anciens navigateurs

Pour les anciens navigateurs qui ne prennent pas en charge les requêtes médiatiques, nous pouvons fournir des styles de secours :

.container {
width: 100%; /* Secours pour les anciens navigateurs */
}

@media screen and (min-width: 600px) {
.container {
width: 80%;
}
}

Et voilà ! Vous avez刚刚 fait vos premiers pas dans le monde du design web responsive avec les requêtes médiatiques CSS. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces concepts. Bon codage !

Credits: Image by storyset