Explication détaillée de l'utilisation de media media query en CSS3

Avec le développement de la mise en page réactive ces dernières années, une fois développée et utilisée plusieurs fois, il existe une demande croissante de sites Web réactifs qui s'adaptent à l'écran. Mais comment adapter le site internet à l’écran ? Ici, nous devons mentionner une nouvelle technologie dans CSS3 - media media queryer.

Alors, qu’est-ce qu’un média queryer ?

Media media query est une nouvelle technologie en CSS3 capable de détecter la résolution d'écran du terminal qui ouvre le site Web.

La méthode d'utilisation de Media Queryer est à peu près la suivante :

1. Définissez une balise méta telle que :

<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Explication des paramètres associés :

Device-width :Définissez la largeur visible de l'écran du périphérique de sortie. 　

　device-height :Définissez la hauteur visible de l'écran du périphérique de sortie.

largeur = largeur de l'appareil : La largeur est égale à la largeur de l'appareil actuel.

　 échelle initiale : Le rapport de mise à l'échelle initial (le paramètre par défaut est 1,0).

Échelle minimale : L'échelle minimale sur laquelle l'utilisateur est autorisé à zoomer (la valeur par défaut est 1,0). ​

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

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

2. Charger le fichier compatible js

Pourquoi charger le fichier compatible js ?

Parce que le noyau d'IE8 et supérieur n'est pas compatible avec les médias html5 et CSS3. Par conséquent, deux fichiers compatibles doivent être chargés pour que notre code puisse être implémenté.

1 <!--[if lt IE 9]>
2 <script src=" 
3      <script src=" 
4 <![endif]-->

Vous pouvez également télécharger html5hiv.js et répondre par vous-même. Pour js, il vous suffit de modifier le chemin src dans le script correspondant lors de son utilisation.

3. Ajustez le mode de rendu d’IE au niveau le plus élevé. La plupart d'IE est la version 9 ou supérieure. Le mode document de cette version d'IE n'est pas le plus récent, ou de nombreux amis n'y ont pas prêté attention. Par conséquent, vous pouvez utiliser le code suivant pour maintenir le mode document d'IE à jour. :

1 <meta http-equiv="X-UA-Compatible" content="IE=edge">

Deuxième méthode :

1 <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

Installer un cadre Google Chrome, un plug-in Google Chrome. Cela permet à tous les navigateurs d'utiliser le moteur Webkit et le moteur V8 pour la composition et le calcul. Si ce plug-in n'est pas installé, le code ci-dessus fera du navigateur le document le plus élevé. Le motif montre l'effet.

Méthode d'écriture standard des médias CSS3 :

Par exemple : lorsque la page est plus petite que 960px, exécutez le code CSS en dessous.

1 @media screen and (max-width: 960px){
3     body{
5         background: #000;
7      }
9 }

Il y a un écran dans ce code, qui signifie dire à l'appareil d'utiliser des polices serif lors de l'impression des pages.

Utilisation des médias CSS2

En fait, ce n'est pas seulement CSS3 qui prend en charge l'utilisation des médias depuis CSS2. L'utilisation spécifique consiste à insérer le paragraphe suivant dans la balise head. de la page HTML. Code :

1 <link rel="stylesheet" type="text/css" media="screen" href="style.css">

Si vous souhaitez savoir si l'appareil mobile actuel dispose d'un affichage portrait, vous pouvez écrire :

1 <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

Le premier paragraphe du code est également implémenté en utilisant CSS2, il peut donc également exécuter le fichier de style spécifié si la largeur de la page est inférieure à 960 :

1 <link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

Cependant, cette méthode augmentera le nombre de visites http. Il est donc préférable d'utiliser CSS3 pour écrire tous les CSS ensemble.

Ok, revenons maintenant à l'utilisation multimédia de CSS3. Nous avons expliqué comment utiliser CSS3 pour écrire la taille lorsque la largeur de l'écran est inférieure à 960 pixels. Écrivons maintenant la méthode égale à 960 pixels : <. 🎜>

1 @media screen and （max-width-device：960px）{
2 
3 Body{
4 
5        Background：blue；
6 
7 
}
8 
9 }

Méthodes d'écriture avec une largeur supérieure à 960px :

1 @media screen and(min-width:960px){
2 
        Body{
        4 
        5               Background:red;
        6 
        7 
        }
        8 
        9 
        }

Les précédentes sont plusieurs méthodes d'écriture couramment utilisées. Faisons ensuite un résumé des médias CSS3 :

largeur : largeur visible dans le navigateur.

hauteur : hauteur visible dans le navigateur.

device-width : La largeur de l'écran de l'appareil.

device-height :La hauteur de l'écran de l'appareil.

orientation : Vérifiez si l'appareil est actuellement en orientation paysage ou portrait.

aspect-ratio : Détecte le rapport entre la largeur et la hauteur visibles du navigateur. (Par exemple : aspect-ratio : 16/9)

device-aspect-ratio : Détectez le rapport entre la largeur et la hauteur de l'appareil.

color : Le nombre de chiffres pour détecter la couleur. (Par exemple : min-color:32 détectera si l'appareil a une couleur 32 bits)

color-index : Vérifiez la couleur dans la table d'index des couleurs de l'appareil, sa valeur ne peut pas être un nombre négatif.

monochrome : Détecte le nombre de bits par pixel dans la zone tampon de trame monochromatique. (C'est trop avancé, je suppose que nous l'utiliserons rarement)

résolution : Détecte la résolution de l'écran ou de l'imprimante. (Par exemple : résolution min : 300 dpi ou résolution min : 118 dpcm).

grille : Détecte si le périphérique de sortie est une grille ou un périphérique bitmap.

Enfin, voici une fin de démo intéressante :

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!