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 de body< /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 <code>body est 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 du corps est gris clair. body背景色为浅蓝色；当屏幕宽度在601px到1200px范围内时，body背景色为浅绿色；当屏幕宽度大于或等于1201px时，body背景色为浅灰色。

使用@media媒体查询属性可以根据屏幕尺寸灵活地调整布局和样式，使得页面在不同设备上都能良好地显示。

二、min-device-width/max-device-width 媒体查询属性：
min-device-width和max-device-width这两个媒体查询属性与min-width和max-width类似，不同之处在于前者是根据设备的物理尺寸来计算的，而后者是根据浏览器窗口的尺寸来计算的。

下面是一个示例，通过min-device-width和max-device-width属性来适应不同的设备屏幕尺寸：

@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;
  }
}

上述代码示例中，当设备屏幕宽度在768px到1024px范围内时，body背景色为浅蓝色；当设备屏幕宽度在1025px到1440px范围内时，body背景色为浅绿色；当设备屏幕宽度大于或等于1441px时，body

Utilisez l'attribut @media media query pour ajuster de manière flexible la mise en page et le style en fonction de la taille de l'écran, afin que la page puisse être correctement affichée sur différents appareils.

2. Attributs de requête multimédia min-device-width/max-device-width :

min-device-width et max-device-width sont similaires à min-width et max-width, mais les différences sont la raison. le premier est calculé en fonction de la taille physique de l'appareil, tandis que le second est calculé en fonction de la taille de la fenêtre du navigateur.

Ce qui suit est un exemple d'adaptation aux différentes tailles d'écran de l'appareil via les propriétés min-device-width et max-device-width :

rrreee

Dans l'exemple de code ci-dessus, lorsque la largeur de l'écran de l'appareil est comprise entre 768 px et 768 px. 1024px, body est bleu clair ; lorsque la largeur de l'écran de l'appareil est comprise entre 1025px et 1440px, la couleur d'arrière-plan de body est vert clair ; la largeur de l'écran de l'appareil est supérieure ou égale à 1 441 px, bodyLa couleur d'arrière-plan est gris clair.

1. Utilisez les propriétés de requête multimédia min-device-width et max-device-width pour ajuster la mise en page et le style en fonction de la taille physique de l'appareil, afin que la page puisse s'adapter à différents appareils.

Conclusion : 🎜Les propriétés de requête multimédia CSS sont un outil très utile lors de la mise en œuvre d'un design réactif. Cet article explore en profondeur les propriétés de requête multimédia @media et min-device-width/max-device-width et fournit des exemples de code spécifiques. En utilisant ces propriétés de manière flexible, nous pouvons ajuster le style et la disposition en fonction de la taille de l'écran ou de la taille physique de l'appareil, obtenant ainsi d'excellents effets de conception réactive. 🎜🎜Références : 🎜🎜🎜MDN Web Docs : https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries🎜🎜

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!