Règle CSS @media
Exemple
Changez la couleur d'arrière-plan de l'élément <body> en "bleu clair" lorsque la fenêtre du navigateur mesure 600 pixels de large ou moins :
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La @media
règle est utilisée dans les requêtes multimédias pour appliquer différents styles pour différents types de médias/périphériques.
Les requêtes multimédias peuvent être utilisées pour vérifier de nombreux éléments, tels que :
- largeur et hauteur de la fenêtre
- largeur et hauteur de l'appareil
- orientation (la tablette/le téléphone est-il en mode paysage ou portrait ?)
- résolution
L'utilisation de requêtes multimédias est une technique populaire pour fournir une feuille de style personnalisée (conception Web réactive) aux ordinateurs de bureau, ordinateurs portables, tablettes et téléphones mobiles.
Vous pouvez également utiliser des requêtes multimédias pour spécifier que certains styles sont uniquement destinés aux documents imprimés ou aux lecteurs d'écran (type de média : impression, écran ou parole).
En plus des types de médias, il existe également des fonctionnalités multimédias. Les fonctionnalités multimédias fournissent des détails plus spécifiques aux requêtes multimédias, en permettant de tester une fonctionnalité spécifique de l'agent utilisateur ou du périphérique d'affichage. Par exemple, vous pouvez appliquer des styles uniquement aux écrans dont la largeur est supérieure ou inférieure à une certaine largeur.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la règle @media.
Property | |||||
---|---|---|---|---|---|
@media | 21 | 9 | 3.5 | 4.0 | 9 |
Syntaxe CSS
@media not|only mediatype and (mediafeature and|or|not
mediafeature) {
CSS-Code;
}
signification des mots-clés not , only et and :
not : le mot-clé not inverse le sens d'une requête média entière.
only : le mot-clé only empêche les anciens navigateurs qui ne prennent pas en charge les requêtes multimédias avec des fonctionnalités multimédias d'appliquer les styles spécifiés. Il n'a aucun effet sur les navigateurs modernes.
et : Le mot-clé and combine une fonctionnalité multimédia avec un type de média ou d'autres fonctionnalités multimédias.
Ils sont tous facultatifs. Cependant, si vous utilisez not ou only , vous devez également spécifier un type de média.
Vous pouvez également avoir différentes feuilles de style pour différents médias, comme ceci :
<link rel="stylesheet" media="screen and (min-width:
900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width:
600px)" href="smallscreen.css">
....
Types de médias
Value | Description |
---|---|
all | Default. Used for all media type devices |
Used for printers | |
screen | Used for computer screens, tablets, smart-phones etc. |
speech | Used for screenreaders that "reads" the page out loud |
Fonctionnalités multimédias
Value | Description |
---|---|
any-hover | Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
any-pointer | Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
aspect-ratio | The ratio between the width and the height of the viewport |
color | The number of bits per color component for the output device |
color-gamut | The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4) |
color-index | The number of colors the device can display |
grid | Whether the device is a grid or bitmap |
height | The viewport height |
hover | Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
inverted-colors | Is the browser or underlying OS inverting colors? (added in Media Queries Level 4) |
light-level | Current ambient light level (added in Media Queries Level 4) |
max-aspect-ratio | The maximum ratio between the width and the height of the display area |
max-color | The maximum number of bits per color component for the output device |
max-color-index | The maximum number of colors the device can display |
max-height | The maximum height of the display area, such as a browser window |
max-monochrome | The maximum number of bits per "color" on a monochrome (greyscale) device |
max-resolution | The maximum resolution of the device, using dpi or dpcm |
max-width | The maximum width of the display area, such as a browser window |
min-aspect-ratio | The minimum ratio between the width and the height of the display area |
min-color | The minimum number of bits per color component for the output device |
min-color-index | The minimum number of colors the device can display |
min-height | The minimum height of the display area, such as a browser window |
min-monochrome | The minimum number of bits per "color" on a monochrome (greyscale) device |
min-resolution | The minimum resolution of the device, using dpi or dpcm |
min-width | The minimum width of the display area, such as a browser window |
monochrome | The number of bits per "color" on a monochrome (greyscale) device |
orientation | The orientation of the viewport (landscape or portrait mode) |
overflow-block | How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4) |
overflow-inline | Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4) |
pointer | Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
resolution | The resolution of the output device, using dpi or dpcm |
scan | The scanning process of the output device |
scripting | Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4) |
update | How quickly can the output device modify the appearance of the content (added in Media Queries Level 4) |
width | The viewport width |
Plus d'exemples
Exemple
Masquez un élément lorsque la largeur du navigateur est inférieure ou égale à 600 pixels :
@media screen and (max-width: 600px) {
div.example {
display:
none;
}
}
Exemple
Utilisez mediaqueries pour définir la couleur d'arrière-plan sur lavande si la fenêtre d'affichage fait 800 pixels de large ou plus, sur vert clair si la fenêtre d'affichage fait entre 400 et 799 pixels de large. Si la fenêtre est inférieure à 400 pixels, la couleur d'arrière-plan est bleu clair :
body {
background-color: lightblue;
}
@media screen and (min-width:
400px) {
body {
background-color: lightgreen;
}
}
@media
screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
Exemple
Créez un menu de navigation responsive (affiché horizontalement sur les grands écrans et verticalement sur les petits écrans) :
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Exemple
Utilisez des requêtes multimédias pour créer une disposition de colonne réactive :
/* On screens that are 992px wide or less, go from four columns to two
columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack
on top of each other instead of next to each other */
@media screen and (max-width:
600px) {
.column {
width: 100%;
}
}
Exemple
Utilisez les requêtes multimédias pour créer un site Web réactif :
Exemple
Les requêtes multimédias peuvent également être utilisées pour modifier la mise en page d'une page en fonction de l'orientation du navigateur. Vous pouvez avoir un ensemble de propriétés CSS qui ne s'appliqueront que lorsque la fenêtre du navigateur est plus large que sa hauteur, une orientation dite "Paysage".
Utilisez une couleur d'arrière-plan bleu clair si l'orientation est en mode paysage :
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Exemple
Utilisez mediaqueries pour définir la couleur du texte sur vert lorsque le document est affiché à l'écran et sur noir lorsqu'il est imprimé :
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
Exemple
Liste séparée par des virgules : ajoutez une requête multimédia supplémentaire à une requête déjà existante, en utilisant une virgule (cela se comportera comme un opérateur OR) :
/* When the width is between 600px and 900px OR above 1100px - change the
appearance of <div> */
@media screen and (max-width: 900px) and
(min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Pages connexes
Tutoriel CSS : requêtes média CSS
Tutoriel CSS : Exemples de requêtes média CSS
Tutoriel RWD : conception Web réactive avec requêtes multimédias
Tutoriel JavaScript : La méthode window.matchMedia()