Les Media Queries en CSS sont utilisées pour appliquer des styles différents à différents appareils en fonction de leur taille et de leur orientation d’écran. Elles sont un aspect clé du design web adaptatif (Responsive Web Design).
Voici comment vous pouvez utiliser les media queries en CSS :
1. Inclure un media query dans un fichier CSS : Vous pouvez inclure une requête média directement dans votre fichier CSS en utilisant la règle @media. Par exemple :
```
@media (max-width: 600px) {
body {
background-color: blue;
}
}
```
Dans cet exemple, lorsque la largeur de l’écran est de 600px ou moins, le fond de la page devient bleu.
1. Créer des media queries pour des orientations spécifiques : Vous pouvez également cibler l’orientation d’un dispositif (portrait ou paysage). Par exemple :
```
@media (orientation: portrait) {
body {
font-size: 18px;
}
}
```
1. Utiliser plusieurs conditions : Vous pouvez appliquer un style spécifique si plusieurs conditions sont vraies. Par exemple :
```
@media (min-width: 700px) and (orientation: landscape) {
body {
background-color: green;
}
}
```
1. Inclure une media query dans un lien HTML : Vous pouvez également inclure une requête média directement dans le lien HTML qui fait référence à votre fichier CSS. Par exemple :
```
```
Dans cet exemple, le navigateur n’appliquera le fichier CSS que lorsque la fenêtre du navigateur aura 800px ou moins.
Remarque : Les media queries ne sont pas prises en charge dans Internet Explorer 8 et ses versions antérieures.
