CSS2 Introduit Types de support
La @media règle, introduite en CSS2, a permis de définir différentes règles de style pour différents types de médias.
Exemples: Vous pourriez avoir un ensemble de règles de style pour les écrans d'ordinateur, un pour les imprimantes, l'un pour les appareils portables, l'un pour les appareils de type télévision, et ainsi de suite.
Malheureusement, ces types de médias n'a jamais eu beaucoup de soutien par des dispositifs autres que le type de support d'impression.
CSS3 lance médias Requêtes
les requêtes des médias dans CSS3 étendent le CSS2 types de médias idée: Au lieu de chercher un type de dispositif, ils regardent la capacité de l'appareil.
requêtes des médias 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 (est la tablette / téléphone en mode paysage ou portrait?)
- résolution
Utilisation des requêtes des médias sont une technique populaire pour délivrer une feuille de style adaptée aux tablettes, iPhone et Androids.
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.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Médias Syntaxe Query
Une requête multimédia se compose d'un type de support et peut contenir une ou plusieurs expressions, qui décident de vrai ou faux.
@media not|onlymediatype and (expressions) {
CSS-Code;
}Le résultat de la requête est vrai si le type de média spécifié correspond au type de dispositif, le document est affiché sur toutes les expressions et dans la requête des médias sont vraies. Lorsqu'une requête de médias est vrai, la feuille de style ou de style règles correspondantes sont appliquées, suivant les règles normales de la cascade.
Sauf si vous utilisez les opérateurs non ou seulement, le type de support est en option et all type sera implicite.
Vous pouvez également avoir des feuilles de style pour différents médias:
<link rel="stylesheet" media=" mediatype and|not|only ( expressions )"
href=" print.css ">Types CSS3 médias
| Valeur | La description |
|---|---|
| all | Utilisé pour tous les appareils de type multimédia |
| Utilisé pour les imprimantes | |
| screen | Utilisé pour les écrans d'ordinateur, tablettes, téléphones intelligents, etc. |
| speech | Utilisé pour screenreaders que "lit" la page à haute voix |
Médias Interroge Exemples simples
Une façon d'utiliser les requêtes des médias est d'avoir une section CSS alternative à l'intérieur de votre feuille de style.
L'exemple suivant modifie le background-color à lightgreen si la fenêtre est de 480 pixels de large ou plus (si la fenêtre est inférieure à 480 pixels, la background-color d' background-color sera rose):
Exemple
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Essayez - le vous - même » L'exemple suivant montre un menu qui flottent à la gauche de la page si la fenêtre est de 480 pixels de large ou plus (si la fenêtre est inférieure à 480 pixels, le menu sera sur le dessus du contenu):
Exemple
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left:216px;}
}
Essayez - le vous - même » CSS3 @media référence
Pour un aperçu complet des types et caractéristiques de tous les médias / expressions, s'il vous plaît regarder la @media règle dans notre référence CSS.