Règle CSS @media
La règle @media spécifie un ensemble de styles qui ne sont appliqués qu'à certains types de médias.
Les requêtes média sont une technique populaire pour proposer une conception web responsive sur les ordinateurs de bureau, les ordinateurs portables, les tablettes et les téléphones mobiles.
Outre les types de médias, il existe des fonctionnalités média qui ont des noms et acceptent certaines valeurs comme les propriétés. Cependant, elles sont utilisées pour tester des conditions au sein des requêtes média plutôt que pour styliser directement les éléments.
Les requêtes média sont utilisées pour vérifier les éléments suivants :
- largeur et hauteur de la zone d'affichage (viewport)
- orientation
- résolution
En JavaScript, l'interface CSSMediaRule représente une règle @media unique et peut être utilisée pour accéder aux règles créées avec @media.
Syntaxe
CSS @media
css
@media <media-query> {
/* styles */
}Les requêtes média peuvent combiner plusieurs conditions à l'aide d'opérateurs logiques : and, not, only et une virgule (,).
Exemple de la règle @media :
CSS @media code example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #1c87c9;
}
@media screen and (max-width: 411px) {
body {
background-color: #cce5ff;
}
}
@media screen and (min-width: 768px) {
body {
background-color: #eee;
}
}
@media screen and (max-width: 962px) and (min-width: 450px),
(min-width: 1366px) {
body {
background-color: #333;
}
}
</style>
</head>
<body>
<h2>@media rule example</h2>
<p>Resize the browser to see the effect.</p>
<p>The background color changes based on the viewport width: light blue for screens up to 411px, light gray for 768px and wider, and dark gray for screens between 450px and 962px, or 1366px and wider.</p>
</body>
</html>Résultat
Dans l'exemple suivant, lorsque la largeur du navigateur est comprise entre 500 et 800px ou supérieure à 1000px, l'apparence de <div> change. Redimensionnez la fenêtre du navigateur pour voir l'effet.
Exemple de la règle @media avec un changement d'apparence de <div> :
CSS @media multiple queries example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #1c87c9;
}
@media screen and (min-width: 200px) {
body {
background-color: #8ebf42;
}
}
@media screen and (min-width: 600px) {
body {
background-color: #ccc;
}
}
@media screen and (max-width: 800px) and (min-width: 500px),
(min-width: 1000px) {
div.box {
font-size: 50px;
padding: 50px;
border: 8px solid #000;
background: #eee;
}
}
</style>
</head>
<body>
<h2>@media rule example</h2>
<p>Media queries set the background-color to grey if the viewport is 600 pixels wide or wider, to green if the viewport is between 200 and 599 pixels wide. If the viewport is smaller than 200 pixels, the background-color is blue.</p>
<h3>Change the appearance of DIV on different screen sizes</h3>
<div class="box">DIV</div>
</body>
</html>Types de médias
| Value | Description |
|---|---|
| all | Cette valeur est utilisée pour tous les appareils. Il s'agit de la valeur par défaut de cette propriété. |
| Est utilisé pour les imprimantes. | |
| screen | Est utilisé pour les écrans d'ordinateur couleur. |
| speech | Est utilisé pour les haut-parleurs (synthèse vocale). |
Exemple d'utilisation de media pour masquer un élément sur les appareils extra petits :
CSS @media Rule
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<style>
@media (max-width: 767px) {
.hide-mobile {
display: none;
}
}
</style>
</head>
<body>
<h1>Hi</h1>
<p>There is some text for example.</p>
<p class="hide-mobile">This text will be hidden on large devices.</p>
<p>There is some text for example.</p>
</body>
</html>Exemple d'utilisation de media pour changer la couleur de fond du contenu sur différents appareils.
CSS @media Rule
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@media screen and (max-width: 767px) {
.content {
background-color: lightblue;
padding: 30px;
}
}
@media screen and (min-width: 768px) {
.content {
background-color: pink;
padding: 10px;
}
}
@media screen and (min-width: 800px) {
.content {
background-color: lightgreen;
color: white;
padding: 50px;
}
}
</style>
</head>
<body>
<div class="content">
<h2>Resize the browser to see the effect.</h2>
<p>
CSS is a rule-based language, which means that you define
rules specifying groups of styles applying to particular
elements or groups of elements on the web page.
</p>
</div>
</body>
</html>Fonctionnalités média
| Value | Description |
|---|---|
| width | La largeur de la zone d'affichage. |
| height | La hauteur de la zone d'affichage. |
| orientation | L'orientation de la zone d'affichage. |
| aspect-ratio | Le rapport entre la valeur de la fonctionnalité média "width" et la valeur de la fonctionnalité média "height". |
| grid | Vérifie si le périphérique de sortie est basé sur une grille ou sur une image bitmap. |
| color | Le nombre de bits par composant de couleur du périphérique de sortie. Si le périphérique n'est pas couleur, la valeur est 0. |
| color-gamut | La plage approximative de couleurs prise en charge par l'agent utilisateur et le périphérique de sortie. |
| inverted-colors | Vérifie si le navigateur ou le système d'exploitation sous-jacent inverse les couleurs ou non. |
| hover | Vérifie si le mécanisme d'entrée principal permet à l'utilisateur de survoler les éléments ou non. |
| any-hover | Vérifie si le mécanisme d'entrée disponible permet à l'utilisateur de survoler les éléments ou non. |
| any-pointer | Vérifie si le mécanisme d'entrée disponible est un dispositif de pointage ou non. |
| light-level | Le niveau d'éclairage de l'environnement. |
| max-aspect-ratio | Le rapport maximum entre la largeur et la hauteur de la zone d'affichage. |
| max-color | Le nombre maximum de bits par composant de couleur pour le périphérique de sortie. |
| max-height | La hauteur maximum de la zone d'affichage. |
| max-monochrome | Le nombre maximum de bits par couleur sur un appareil monochrome. |
| max-resolution | La résolution maximum de l'appareil. |
| max-width | La largeur maximum de la zone d'affichage. |
| min-aspect-ratio | Le rapport minimum entre la largeur et la hauteur de la zone d'affichage. |
| min-color | Le nombre minimum de bits par composant de couleur pour le périphérique de sortie. |
| min-height | La hauteur minimum de la zone d'affichage. |
| min-monochrome | Le nombre minimum de bits par couleur sur un appareil monochrome. |
| min-resolution | La résolution minimum de l'appareil. |
| min-width | La largeur minimum de la zone d'affichage. |
| overflow-block | Indique comment le périphérique de sortie gère le contenu qui déborde de la zone d'affichage le long de l'axe bloc. |
| overflow-inline | Vérifie si le contenu qui déborde de la zone d'affichage le long de l'axe en ligne peut être défilé ou non. |
| pointer | Vérifie si le mécanisme d'entrée principal est un dispositif de pointage ou non. |
| resolution | Décrit la résolution du périphérique de sortie. |
| scripting | Vérifie si le scriptage est disponible ou non. |
| update | Indique la rapidité avec laquelle le périphérique de sortie peut modifier l'apparence du contenu. |
Pratique
Quelles sont les fonctions des requêtes média en CSS ?