Explorer les propriétés des requêtes multimédia CSS : @media et min-device-width/max-device-width

Exploration des attributs de requête multimédia CSS : @media et min-device-width/max-device-width, des exemples de code spécifiques sont nécessaires

Introduction :
Avec la popularité des appareils mobiles, la conception réactive des sites Web est devenue plus et plus Plus c'est important. Lors de la mise en œuvre d'une conception réactive, les propriétés des requêtes multimédias CSS jouent un rôle essentiel. Cet article explorera en profondeur les propriétés de requête multimédia @media et min-device-width/max-device-width et fournira des exemples de code spécifiques.

1. Attribut de requête multimédia @media :
@media est un attribut de requête multimédia introduit par CSS3, qui peut appliquer différentes règles de style en fonction de différents appareils multimédias ou paramètres d'écran. Les types de supports couramment utilisés incluent l'écran, l'impression, la parole, etc., tandis que les caractéristiques des supports couramment utilisés incluent la largeur, la hauteur, la couleur, la résolution, etc.

Ce qui suit est un exemple d'utilisation de l'attribut @media pour s'adapter à différentes tailles d'écran :

@media screen and (max-width: 600px) { body { background-color: lightblue; } } @media screen and (min-width: 601px) and (max-width: 1200px) { body { background-color: lightgreen; } } @media screen and (min-width: 1201px) { body { background-color: lightgray; } }

Dans l'exemple de code ci-dessus, lorsque la largeur de l'écran est inférieure ou égale à 600px, la couleur d'arrière-plan debody< /code> est bleu clair ; lorsque la largeur de l'écran est comprise entre 601 px et 1 200 px, la couleur d'arrière-plan de bodyest vert clair ; lorsque la largeur de l'écran est supérieure ou égale à 1 201 px, l'arrière-plan est bleu clair ; la couleur ducorpsest gris clair.body背景色为浅蓝色；当屏幕宽度在601px到1200px范围内时，body背景色为浅绿色；当屏幕宽度大于或等于1201px时，body背景色为浅灰色。

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { body { background-color: lightblue; } } @media only screen and (min-device-width: 1025px) and (max-device-width: 1440px) { body { background-color: lightgreen; } } @media only screen and (min-device-width: 1441px) { body { background-color: lightgray; } }