Résumé de l'utilisation des requêtes multimédias CSS3

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 :

Préparation 1 : Définir la balise Meta

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

Cette section Explication de plusieurs paramètres du code :

• width = device-width : largeur égale à la largeur de l'appareil actuel

• initial-scale : échelle de mise à l'échelle initiale (définie par défaut sur 1,0)

• échelle minimale : l'échelle minimale sur laquelle l'utilisateur est autorisé à zoomer (définie par défaut sur 1,0)

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

• évolutive par l'utilisateur : indique si l'utilisateur peut zoomer manuellement (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 les fichiers compatibles JS

car IE8 ne prend en charge ni HTML5 ni CSS3 Media , nous devons donc charger deux fichiers JS pour nous assurer que notre code est compatible :

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

Préparation 3 : réglez le mode de rendu IE sur valeur par défaut la plus élevée (vous pouvez choisir d'ajouter cette partie ou non)

De nos jours, le navigateur IE de nombreuses personnes a été mis à niveau vers IE9 ou supérieur, donc beaucoup de choses étranges se produisent en ce moment. Par exemple, il s'agit du navigateur IE9 maintenant, mais lors de la navigation, le mode document du navigateur est IE8 :

Afin d'éviter cette situation, nous avons besoin du code suivant pour que le mode document d'IE soit toujours à jour :

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

Il existe une autre meilleure façon de l'écrire :

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

Pourquoi y a-t-il un chrome=1 ajouté après ce code, ce cadre Google Chrome (navigateur intégré Google FrameworkGCF), si certains utilisateurs Avec ce plug-in Chrome installé sur l'ordinateur, quelle que soit la version d'IE installée sur l'ordinateur, il peut utiliser le moteur Webkit et le moteur V8 pour la composition et le calcul, ce qui est extrêmement Cependant, si l'utilisateur n'installe pas ce plug-in, ce code fera en sorte qu'IE affiche 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.

Entrez dans l'écriture de médias CSS3 :

Jetons d'abord un coup d'œil au code suivant. On estime que de nombreuses personnes voient souvent du code similaire à celui-ci dans le CSS des sites Web réactifs

@media screen and (max-width: 960px){
    body{
        background: #ccc;
    }}

.

Cela doit être considéré comme une manière standard d'écrire des médias. Le code CSS ci-dessus signifie : lorsque la page est inférieure à 960 px, exécutez le CSS en dessous. Il ne devrait y avoir aucun grand doute à ce sujet.

Quelqu'un peut constater qu'il y a un écran dans le code ci-dessus. Cela signifie que l'appareil doit utiliser des polices avec empattement lors de l'impression des pages et des polices sans empattement lors de l'affichage à l'écran. Mais maintenant, je trouve que de nombreux sites Web omettent directement l'écran, car votre site Web n'a peut-être pas besoin de prendre en compte le moment où les utilisateurs impriment, vous pouvez écrire directement comme ceci :

@media (max-width: 960px){
    body{
        background: #ccc;
    }}

Ensuite, il y a le code lorsque la taille du navigateur est supérieur à 960px Maintenant :

@media screen and (min-width:960px){
    body{
        background:orange;
    }}

Nous pouvons également mélanger l'utilisation ci-dessus :

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }}

Le code ci-dessus signifie exécuter le CSS suivant lorsque la largeur de la page est supérieure à 960px et inférieure que 1200px.

Résumé de tous les paramètres de Media

Ce qui précède sont les trois caractéristiques de la Media Query que nous avons le plus souvent besoin d'utiliser, les méthodes d'écriture de supérieur à, égal à et moins que. La fonction complète du media queryer est certainement plus que ces trois fonctions. Voici quelques explications de l'utilisation de ses paramètres résumées par moi :

• width : largeur visible du 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 mode 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étectez la résolution de l'écran ou de l'imprimante. (Par exemple : résolution min : 300 dpi ou résolution min : 118 dpcm).

• grille : Vérifiez si le périphérique de sortie est une grille ou un périphérique bitmap.

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!