Exemple
Changer la couleur d'arrière plan si la fenêtre est de 480 pixels de large ou plus:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Essayez - le vous - même » Plus "Try it Yourself" exemples ci - dessous.
Définition et utilisation
La règle @media permet de définir différentes règles de style pour différents types / périphériques multimédia.
En CSS2, on appelait les types de médias, alors que dans CSS3 il est appelé requêtes des médias.
requêtes des médias regardent la capacité de l'appareil, et peuvent être utilisés pour vérifier beaucoup de choses, telles que:
- la largeur et la hauteur de la fenêtre
- la largeur et la hauteur du dispositif
- orientation (is the tablet/phone in landscape or portrait mode?)
- résolution
- et beaucoup plus
support du navigateur
Les chiffres dans le tableau indique la première version du navigateur qui prend en charge pleinement la règle @media.
| Propriété | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
Syntaxe CSS
@media not|onlymediatype and (media feature){
CSS-Code;
}Vous pouvez également avoir des feuilles de style pour différents médias:
<link rel="stylesheet" media=" mediatype and|not|only ( media
feature )"
href=" mystylesheet.css ">Types de support
| Valeur | La description |
|---|---|
| all | Utilisé pour tous les appareils de type multimédia |
| aural | Obsolète. Utilisé pour la parole et les synthétiseurs sonores |
| braille | Obsolète. Utilisé pour appareils braille à retour tactile |
| embossed | Obsolète. Utilisé pour les imprimantes brailles paginés |
| handheld | Obsolète. Utilisé pour les petits ou portables appareils |
| Utilisé pour les imprimantes | |
| projection | Obsolète. Utilisé pour les présentations projetées, comme des diapositives |
| screen | Utilisé pour les écrans d'ordinateur, tablettes, téléphones intelligents, etc. |
| speech | Utilisé pour screenreaders que "reads" la page à haute voix |
| tty | Obsolète. Utilisé pour les médias en utilisant une grille de caractères à espacement fixe, comme les téléscripteurs et les terminaux |
| tv | Obsolète. Utilisé pour les appareils de type télévision |
médias Caractéristiques
| Valeur | La description |
|---|---|
| aspect-ratio | Le rapport entre la largeur et la hauteur de la fenêtre |
| color | Le nombre de bits par composante de couleur pour le dispositif de sortie |
| color-index | Le nombre de couleurs, le dispositif peut afficher |
| device-aspect-ratio | Le rapport entre la largeur et la hauteur du dispositif |
| device-height | La hauteur du dispositif, tel qu'un écran d'ordinateur |
| device-width | La largeur du dispositif, tel qu'un écran d'ordinateur |
| grid | Que le dispositif est une grille ou bitmap |
| height | La hauteur de la fenêtre |
| max-aspect-ratio | Le rapport maximal entre la largeur et la hauteur de la zone d'affichage |
| max-color | Le nombre maximal de bits par composante de couleur pour le dispositif de sortie |
| max-color-index | Le nombre maximum de couleurs, le dispositif peut afficher |
| max-device-aspect-ratio | Le rapport maximal entre la largeur et la hauteur du dispositif |
| max-device-height | La hauteur maximale de l'appareil, tel qu'un écran d'ordinateur |
| max-device-width | La largeur maximale du dispositif, tel qu'un écran d'ordinateur |
| max-height | La hauteur maximale de la zone d'affichage, comme une fenêtre de navigateur |
| max-monochrome | Le nombre maximum de bits par "color" sur un monochrome (greyscale) dispositif |
| max-resolution | La résolution maximale de l'appareil, en utilisant dpi ou dpcm |
| max-width | La largeur maximale de la zone d'affichage, comme une fenêtre de navigateur |
| min-aspect-ratio | Le rapport minimal entre la largeur et la hauteur de la zone d'affichage |
| min-color | Le nombre minimal de bits par composante de couleur pour le dispositif de sortie |
| min-color-index | Le nombre minimum de couleurs, le dispositif peut afficher |
| min-device-aspect-ratio | Le rapport minimal entre la largeur et la hauteur du dispositif |
| min-device-width | La largeur minimale de l'appareil, tel qu'un écran d'ordinateur |
| min-device-height | La hauteur minimale de l'appareil, tel qu'un écran d'ordinateur |
| min-height | La hauteur minimale de la zone d'affichage, comme une fenêtre de navigateur |
| min-monochrome | Le nombre minimum de bits par "color" sur un monochrome (greyscale) dispositif |
| min-resolution | La résolution minimale de l'appareil, en utilisant dpi ou dpcm |
| min-width | La largeur minimale de la zone d'affichage, comme une fenêtre de navigateur |
| monochrome | Le nombre de bits par "color" sur un monochrome (greyscale) dispositif |
| orientation | L'orientation de la fenêtre (landscape or portrait mode) en (landscape or portrait mode) |
| overflow-block | Comment le contenu de la poignée de dispositif de sortie qui déborde la fenêtre le long de l'axe de bloc (added in Media Queries Level 4) les (added in Media Queries Level 4) |
| overflow-inline | Peut - contenu qui déborde la fenêtre le long de l'axe inline être défilée (added in Media Queries Level 4) les (added in Media Queries Level 4) |
| resolution | La résolution du dispositif de sortie, en utilisant ppp ou DPCM |
| scan | Le procédé de dispositif de sortie à balayage |
| update-frequency | Combien de temps peut le périphérique de sortie modifier l'apparence du contenu (added in Media Queries Level 4) les (added in Media Queries Level 4) |
| width | La largeur de la fenêtre |
Autres exemples
Exemple
Utilisez la règle @media pour faire une conception adaptée:
@media only screen and (max-width: 500px) {
.gridmenu
{
width:100%;
}
.gridmain
{
width:100%;
}
.gridright {
width:100%;
}
}
Essayez - le vous - même » Pages associées
CSS tutorial: CSS médias Requêtes