CSS3 @media requête

Exemples

Si le document largeur inférieure à 300 pixels est de modifier la présentation de fond (background-color):

écran @media et (max-width: 300px) {
body {
background-color: lightblue;
}
}

Définitions et utilisation

Utilisez @media requêtes, vous pouvez définir des styles différents pour les différents types de médias.

@media peut être réglé pour différentes tailles d'écran différents styles, en particulier si vous avez besoin de définir la conception des pages sensibles, @ media est très utile.

Lorsque vous réinitialisez la taille du navigateur du processus, la page sera ré-rendu de la page en fonction de la largeur et la hauteur du navigateur.

support du navigateur

Les chiffres du tableau indiquent les règles de soutien @media premier numéro de version du navigateur.

règle
@media	21	9	3.5	4.0	9

Syntaxe CSS

@media MediaType et | non | seulement (fonctionnalité de média) {
Code-CSS;
}

Vous pouvez également utiliser différentes feuilles de style pour différents médias:

Type de support

valeur	description
tous	Pour tous les dispositifs
auriculaire	Obsolète. Pour la parole et synthétiseur vocal
braille	Obsolète. équipements Braille utilisé tactile rétroaction
gaufré	Obsolète. Appareil d'impression aveugle pour l'impression
ordinateur de poche	Obsolète. Pour les appareils portables ou des appareils plus petits, tels que les PDA et le petit téléphone
imprimer	Pour les imprimantes et l'aperçu avant impression
projection	Obsolète. Pour les équipements de projection
écran	Pour les écrans d'ordinateur, les tablettes PC, les téléphones intelligents et autres.
discours	Appliquée aux lecteurs d'écran et autres équipements de son
tty	Obsolète. Pour la fixation de la grille de caractères, tels que le télégraphe, l'équipement terminal et le caractère limité de l'appareil portable
TV	Obsolète. Pour la TV et Web TV

caractéristiques des médias

valeur	description
rapport d'aspect	Définir le dispositif de sortie dans la région visible de la largeur de page à rapport de hauteur
couleur	Définir le dispositif de sortie dans chaque groupe, le numéro de la couleur d'origine. Si elle est pas un appareil de couleur, la valeur est égale à 0
couleur index	Le nombre d'entrées dans la couleur look-up table est définie dans le dispositif de sortie. Si vous n'utilisez une table de correspondance des couleurs, la valeur est égale à 0
dispositif aspect ratio	Dispositif de sortie de définition d'écran largeur visible rapport hauteur.
dispositif hauteur	Définition d'un écran périphérique de sortie de hauteur visible.
Dispositif de largeur	Définition d'un écran périphérique de sortie largeur visible.
grille	Le dispositif de sortie utilisé pour interroger si la grille ou treillis.
hauteur	Définir le dispositif de sortie dans la région visible de la hauteur de la page.
max-aspect-rapport	Définition d'un écran périphérique de sortie du rapport maximal visible de la largeur à la hauteur.
max-couleur	Définir le nombre maximum de dispositifs de sortie de chaque ensemble de couleur d'origine.
max-couleur-index	Le nombre maximum d'entrées dans la couleur look-up table est définie dans le dispositif de sortie.
max-device-aspect ratio	Définition d'un écran périphérique de sortie du rapport maximal visible de la largeur à la hauteur.
max-device-hauteur	Écran définissent les dispositifs de sortie visibles à la hauteur maximale.
max-device-width	Définition d'un écran périphérique de sortie largeur maximale visible.
max-height	Définir le dispositif de sortie dans la région visible de la hauteur maximale de la page.
max-monochrome	Est définie dans un cadre monochrome tampon contient par pixel est le nombre maximum de monochrome d'origine.
max-résolution	La résolution maximale définit le dispositif.
max-width	Définir le dispositif de sortie dans la région visible de la largeur maximale de la page.
min-rapport d'aspect	Définir le dispositif de sortie dans la zone de la page visible rapport minimal entre la largeur et la hauteur.
min-couleur	Définir le périphérique de sortie chaque nombre minimum fixé de l'original de couleur.
min-couleur-index	Le nombre minimum d'entrées dans la couleur look-up table est définie dans le dispositif de sortie.
min-device-aspect ratio	Écran définissent le ratio minimum dispositifs de sortie visible de largeur à la hauteur.
min-device-width	dispositifs de sortie de l'écran définis largeur visible minimum.
min-device-hauteur	Minimum définir écran la hauteur visible du périphérique de sortie.
min-height	Définir le dispositif de sortie dans la région visible de la hauteur minimale de la page.
min-monochrome	Le nombre minimum d'originaux en couleur est définie dans un tampon de trame monochrome contient par pixel
min-résolution	La résolution minimale définit le dispositif.
min-width	Définir le dispositif de sortie dans la région visible de la largeur minimale de la page.
camaïeu	Est défini dans un tampon de trame monochrome contient par pixel monochrome numéro d'origine. Dans le cas contraire un dispositif monochrome, la valeur est égale à 0
orientation	Définir le dispositif de sortie dans la région visible de la hauteur de la page est supérieure ou égale à la largeur.
résolution	Définir la résolution de l'appareil. Tels que: 96dpi, 300dpi, 118dpcm
balayage	Processus de numérisation type d'équipement TV définition.
largeur	Définir le dispositif de sortie dans la région visible de la largeur de la page.