Maison >interface Web >tutoriel CSS >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 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
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.
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. 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!