La requête @media de CSS3 est une fonctionnalité puissante qui nous permet d'appliquer différentes règles de style en fonction de différents types de médias et caractéristiques de l'appareil. Cela nous permet de créer des conceptions réactives qui garantissent que le site Web ou l'application offre une excellente expérience utilisateur sur une variété d'appareils et de tailles d'écran. Cet article abordera en détail la définition, la syntaxe, les scénarios d'utilisation et les problèmes courants de la requête @media.
Les règles @media de CSS3 vous permettent d'appliquer différentes règles de style en fonction du type de média et de ses propriétés. Le type de support (Media Type) tel que screen (écran), print (impression), etc., tandis que les caractéristiques du support (Media Features) telles que width , height , orientation etc., sont utilisés pour décrire les caractéristiques spécifiques de l'appareil.
La syntaxe de base de la requête @media est la suivante :
@media mediatype et|pas|seulement (fonctionnalité média) {
/* Règles CSS*/
}screen , print , etc. En cas d'omission, la valeur par défaut est tous les types de médias. fonctionnalité multimédia : définissez les conditions pour les fonctionnalités et les valeurs multimédias, telles que min-width , max-width , orientation , etc.Dans les requêtes @media, vous pouvez utiliser les opérateurs logiques suivants pour combiner les conditions des médias :
et : Indique que toutes les conditions doivent être remplies. not : Indique que le style est appliqué lorsque la condition n'est pas remplie. uniquement : utilisé pour empêcher les anciens navigateurs qui ne prennent pas en charge les requêtes multimédias d'appliquer des styles. Virgule : indique que le style est appliqué lorsque l'une des plusieurs conditions est remplie.1. Définissez les styles en fonction de la taille de l'écran
Écran @media et (largeur minimale : 600 px) {
corps {
couleur de fond : bleu clair ;
}
}Lorsque la largeur de l'écran est d'au moins 600 pixels, la couleur d'arrière-plan de la page passe au bleu clair.
2. Conception réactive
Écran @media et (largeur maximale : 800 px) {
.conteneur {
largeur : 100 % ;
}
}
Écran @media et (largeur minimale : 801 px) {
.conteneur {
largeur : 750 px ;
}
}Modifiez la largeur du conteneur en fonction de la largeur de l'écran pour une conception réactive.
3. Style d'impression
@media imprimer {
corps {
taille de police : 12 pts ;
couleur : noir ;
fond : blanc ;
}
}Définissez des styles d'impression spécifiques, tels que la taille de la police, la couleur et l'arrière-plan.
4. Écrans horizontaux et verticaux
Écran @media et (orientation : paysage) {
#barre latérale {
affichage : aucun ;
}
}Masquez la barre latérale lorsque l'appareil est en mode paysage.
CSS3 fournit une variété de fonctionnalités multimédias. Voici quelques fonctionnalités couramment utilisées :
width , min-width , max-width : Définissez la largeur de la zone visible de la page dans le périphérique de sortie. height , min-height , max-height : Définissez la hauteur de la zone visible de la page dans le périphérique de sortie. orientation : Définissez l’orientation de l’appareil, telle queportrait (écran vertical) et landscape (écran horizontal). résolution : Définit la résolution de l’appareil. color , color-index : définit les capacités de couleur et l'index de couleur.min-width et max-width comme conditions de jugement, vous devez vous assurer que la plage de conditions est triée de petite à grande ou de grande à petite pour éviter les problèmes de couverture de style. Conflits de styles : assurez-vous que les styles dans les requêtes @media ne sont pas remplacés par les règles CSS ultérieures. Il est recommandé d'écrire le style de requête @media à la fin. Balise Meta : définissez <meta name="viewport" content="width=device-width, initial-scale=1.0"> pour garantir que les appareils mobiles peuvent afficher correctement la page. Erreur de syntaxe : assurez-vous que la syntaxe de la requête @media est correcte, en particulier l'espace après l'opérateur logique et n'écrivez pas le terminateur ";" entre parenthèses.La requête @media de CSS3 est un outil important pour créer des conceptions réactives, nous permettant d'appliquer différentes règles de style en fonction de différents types de médias et propriétés des médias. En tirant parti des requêtes @media, nous pouvons garantir que notre site Web ou notre application offre une expérience utilisateur exceptionnelle sur une variété d'appareils et de tailles d'écran. J'espère que cet article pourra vous aider à mieux comprendre et utiliser les requêtes @media.
Ceci conclut cet article sur la requête @media dans CSS3. Pour plus de contenu sur les requêtes @media CSS3, veuillez rechercher les articles précédents sur downcodes.com ou continuer à parcourir les articles pertinents ci-dessous. J'espère que vous prendrez davantage en charge les downcodes à l'avenir.