Avec la popularité rapide des appareils mobiles, les utilisateurs n'utilisent plus uniquement les ordinateurs traditionnels pour parcourir le contenu Web. De plus en plus d'utilisateurs commencent à utiliser des smartphones, des tablettes ou d'autres appareils de différentes tailles pour parcourir le contenu Web afin de garantir l'utilisation d'If. les utilisateurs de différents appareils peuvent avoir une bonne expérience, ils doivent utiliser des requêtes multimédias.
La requête multimédia est l'une des fonctions les plus importantes des feuilles de style CSS. La requête multimédia fait référence à la distinction de différents appareils (tels que les ordinateurs, les téléphones portables, les tablettes, les appareils braille, etc.) en fonction de différents types de médias (types d'appareils). et les conditions. Et définissez respectivement différents styles CSS pour eux. Les requêtes multimédias permettent à CSS d'agir avec plus de précision sur différents appareils ou sur différentes conditions sur le même appareil, afin que tous les utilisateurs puissent bénéficier d'une bonne expérience utilisateur.
1. Type de média
Les types de médias sont utilisés pour représenter les catégories d'appareils. CSS fournit des mots-clés pour représenter différents types de médias, comme indiqué dans le tableau suivant :
2. Caractéristiques des médias
Outre les types spécifiques, les caractéristiques spécifiques de l'appareil peuvent également être décrites à travers certains attributs, tels que la largeur, la hauteur, la résolution, etc., comme indiqué dans le tableau suivant :
3. Opérateurs logiques
Les opérateurs logiques incluent non, et et uniquement. Les requêtes multimédias complexes peuvent être construites via des opérateurs logiques. Vous pouvez également séparer plusieurs requêtes multimédias par des virgules et les combiner en une seule règle.
et : utilisé pour combiner plusieurs requêtes multimédias en une seule requête multimédia. Lorsque chaque règle de requête est vraie, la requête multimédia est vraie. De plus, l'opérateur et peut également combiner les caractéristiques multimédias et les types de médias ;
not : utilisé pour annuler les requêtes multimédias. Lorsque la règle de requête n'est pas vraie, elle renvoie vrai, sinon elle renvoie faux. Si l'opérateur not est utilisé, le type de média doit également être spécifié ;
only : ne prendra effet que si l'intégralité de la requête correspond. Lorsque only n'est pas utilisé, les anciens navigateurs interpréteront simplement screen et (max-width : 500px) comme screen, ignoreront le reste de la requête et appliqueront le style à Tous les écrans. Si vous utilisez l'opérateur unique, vous devez également spécifier le type de média.
4. Définir les requêtes média
Actuellement, vous pouvez définir des requêtes multimédias de deux manières :
Utilisez les règles @media ou @import pour spécifier le type de périphérique correspondant dans la feuille de style ;
Utilisez l'attribut media pour spécifier un type de périphérique spécifique dans un <style>, <link>, <source> ou un autre élément HTML.
(1)@médias
Nous avons brièvement examiné @media dans la section "CSS @Rules". En utilisant @media, vous pouvez spécifier un ensemble de requêtes multimédias et un bloc de style CSS si et seulement si la requête multimédia correspond au périphérique utilisé, au style CSS spécifié. sera appliqué au document. L'exemple de code est le suivant :
/*Sur les écrans inférieurs ou égaux à 992 pixels, définissez la couleur d'arrière-plan sur bleu*/@mediascreenand(max-width:992px){body{background-color:blue;}}/*Sur les écrans de 600 pixels ou moins Sur le écran, définissez la couleur d'arrière-plan sur olive */@mediascreenand(max-width:600px){body{background-color:olive;}}(2) @importer
@import est utilisé pour importer un fichier de style externe spécifié et spécifier le type de média cible. L'exemple de code est le suivant :
@importurl(css/screen.css)screen;/*Introduction de styles externes, ce style ne sera appliqué qu'aux écrans d'ordinateur*/@importurl(css/print.css)print;/*Introduction de styles externes, ce style ne sera appliqué qu'aux écrans d'ordinateur. appliqué au périphérique d'impression*/body{background:#f5f5f5;line-height:1.2;}Remarque : Toutes les instructions @import doivent apparaître au début de la feuille de style et les styles définis dans la feuille de style remplacent les styles en conflit dans les feuilles de style externes importées.
(3) attribut multimédia
Vous pouvez également définir des requêtes multimédias dans les attributs multimédias de <style>, <link>, <source> et d'autres balises. L'exemple de code est le suivant :
/*Appliquez ce style lorsque la largeur de la page est supérieure ou égale à 900 pixels*/<linkrel=stylesheetmedia=screenand(min-width:900px)href=widescreen.css>/*Appliquez ce style lorsque la largeur de la page est inférieure à ou égal à 600 pixels*/< linkrel=stylesheetmedia=screenand(max-width:600px)href=smallscreen.css>
Conseil : Vous pouvez également spécifier plusieurs types de média dans l'attribut media, en utilisant des virgules pour séparer chaque type de média, par exemple, media=screen, print.