Le meilleur didacticiel CSS3 @media requête en 2024, dans ce didacticiel, vous pouvez apprendre Exemples,Définitions et utilisation,support du navigateur,Syntaxe CSS,Type de support,caractéristiques des médias,D'autres exemples,Exemples,Pages associées,
Si le document largeur inférieure à 300 pixels est de modifier la présentation de fond (background-color):
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.
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 |
Vous pouvez également utiliser différentes feuilles de style pour différents médias:
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 |
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. |
Utilisez @media requêtes pour créer une conception adaptée:
CSS tutorial: les types de médias CSS