CSS utilise les requêtes multimédias @media pour une conception réactive. Que sont les requêtes multimédias ?

Avec le développement d'Internet, divers appareils mobiles tels que les smartphones et les tablettes peuvent être vus partout. Alors, comment notre site Web peut-il être correctement présenté sur différents appareils mobiles ? Écrire un ensemble de codes pour chaque appareil est fastidieux et nécessite beaucoup de travail. Ensuite, les programmeurs intelligents utiliseront un ensemble de codes pour que le site Web s'affiche raisonnablement sur des appareils de différentes tailles. C'est ainsi qu'est né le modèle de conception réactive, dont le cœur est le « media query ».

1. Qu'est-ce que la requête multimédia

La requête multimédia nous permet de déterminer les caractéristiques de l'affichage de l'appareil (telles que la largeur de la fenêtre, le rapport de l'écran, l'orientation de l'appareil : paysage ou portrait) Pour définir des styles CSS, une requête multimé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.

À l'aide des requêtes @media, vous pouvez définir différents styles pour différents types de médias. @media peut définir différents styles pour différentes tailles d'écran, surtout si vous devez configurer une page réactive, @media est très utile. Lorsque vous réinitialisez la taille du navigateur, la page sera également restituée en fonction de la largeur et de la hauteur du navigateur.

2. Utilisation de @media media query

a Ajoutez le code suivant au document html pour être compatible avec l'effet d'affichage des appareils mobiles

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

width=device-width : la largeur est égale à la largeur de l'appareil actuel
initial-scale=1 : le rapport de mise à l'échelle initial (la valeur par défaut est 1)
maximum-scale= 1 : permet à l'utilisateur de zoomer pour obtenir le rapport maximum (la valeur par défaut est 1)
user-scalable=no : les utilisateurs ne peuvent pas mettre à l'échelle manuellement

b. Écrire des requêtes multimédias réactives dans des fichiers CSS

Syntaxe de base : @media media Type et (caractéristiques du média) {style>

Exemple 1 :

@media screen and (max-width:480px){
body {
background:red
  }
}

signifie : lorsque l'écran est inférieur ou égal à 480px, la couleur de fond sur la page devient rouge.

Exemple 2 :

@media screen and (min-width:900px){
body{
font-size：20px
    }
}

signifie : lorsque l'écran est supérieur ou égal à 900px, la taille de la police sur la page devient 20px.

Exemple 3 :

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

signifie : lorsque l'écran est entre 600px~900px, la couleur d'arrière-plan du corps est "#f5f5f5".

Résumé : ce qui précède présente ce qu'est la requête média @media et donne des exemples d'utilisation des requêtes média.

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!