Résumé des connaissances sur les requêtes multimédias CSS3

1. Qu'est-ce qu'une requête multimédia ?

Les requêtes multimédias nous permettent de définir l'appareil en fonction des caractéristiques de l'affichage de l'appareil (telles que la largeur de la fenêtre d'affichage, le rapport de l'écran, l'orientation de l'appareil). : paysage ou portrait). Pour définir les styles CSS, une requête média se compose d'un type de média et d'une ou plusieurs expressions conditionnelles qui détectent les caractéristiques du média. Les propriétés multimédias qui peuvent être détectées dans les requêtes multimédias sont width , height et color (etc.). À l'aide des requêtes multimédias, vous pouvez personnaliser l'effet d'affichage pour des périphériques de sortie spécifiques sans modifier le contenu de la page.

2. Pourquoi le responsive design nécessite-t-il des requêtes multimédias
S'il n'y a pas de module de requête multimédia CSS3, il ne peut pas cibler les caractéristiques de l'appareil (telles que la largeur de la fenêtre d'affichage ? ) Définir des styles CSS spécifiques

3. Comment introduire les requêtes multimédias dans les fichiers CSS

Les requêtes multimédias sont écrites à la fin du style CSS. code, CSS C'est une feuille de style en cascade. Sous la même spécificité, les styles ultérieurs chevaucheront les styles précédents

4 Comment utiliser les médias

.

Préparation 1 : Définir la balise Meta

Tout d'abord, lors de l'utilisation de Media, nous devons définir le code suivant pour qu'il soit compatible avec l'effet d'affichage des appareils mobiles :

Explication de plusieurs paramètres de ce code :

• largeur = largeur de l'appareil : width est égal à la largeur de l'appareil actuel

• échelle initiale : Mise à l'échelle initiale (le paramètre par défaut est 1,0)

• échelle minimale : Le rapport minimum sur lequel l'utilisateur est autorisé à zoomer (le paramètre par défaut est 1,0)

• échelle maximale : Le rapport maximum sur lequel l'utilisateur est autorisé à zoomer (la valeur par défaut est définie sur 1,0)

• évolutif par l'utilisateur : Si l'utilisateur peut zoomer manuellement (la valeur par défaut est non, car nous ne voulons pas que les utilisateurs effectuent un zoom avant et arrière sur la page)

Préparation 2 : Charger le fichier compatible JS

Car IE8 ne prend en charge ni les médias HTML5 ni CSS3, nous devons charger deux fichiers JS pour garantir la compatibilité de notre code :

Préparation 3 : Configurer le rendu IE Le mode par défaut est le plus élevé (vous pouvez choisir d'ajouter cette partie ou non)

De nos jours, les navigateurs IE de nombreuses personnes ont été mis à niveau vers IE9 ou supérieur , donc à ce moment-là, beaucoup de choses étranges se produisent, comme Il s'agit maintenant d'un navigateur IE9, mais le mode document du navigateur est IE8 :

Afin d'éviter cela situation, nous avons besoin du code suivant pour activer le mode document d'IE. Toujours à jour :

Ce code est suivi d'un chrome=1, ce Google Chrome Frame (Google Embedded Browser Framework GCF ) , le cas échéant Avec ce plug-in Chrome installé sur l'ordinateur de l'utilisateur, quelle que soit la version d'IE installée sur l'ordinateur, il peut utiliser le moteur Webkit et le V8 moteur de composition et de calcul, qui est extrêmement puissant. Cependant, si l'utilisateur n'installe pas ce plug-in, alors ce code amènera IE à afficher l'effet dans le mode de document le plus élevé. Je vous recommande toujours d'utiliser ce code, mais vous pouvez le faire sans lui.

2. Comment écrire des requêtes multimédias réactives CSS dans des fichiers CSS

Exemple : Changer le style en fonction de différentes largeurs

HTML :

John Doe

Mary Moe< ; /li>

Amanda Panda

CSS :

//Largeur inférieure à 500 pixels

@écran multimédia et (max-width:500px) {

ul> li {

                  fond : bleu ;

                                                                                                                                  >

/ /Largeur à 500-700 pixels

@écran multimédia et (largeur maximale : 700 px) et (largeur min : 501 px) {

                                                                                                                   🎜>                            fond : verge d'or;             }

}

//La largeur est de 700 à 1 000 pixels

@media screen et (max-width:1000px) et (min-width:701px) {

                                                                                                                                                                          ;

                     taille de la police : 20 px >}

//Largeur supérieure à 1000 pixels

@écran multimédia et (min-width:1001px) { ul>li {

                                                                                                                                                                                                fond : violet; px;>

//Fin du style

En un mot, @media Il y a trois points majeurs ：

1, balise méta

2, compatible avec IE 3, @media; écran et (max-width : 980px){} (exemple de style)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!