Répertoire d'articles
Comment le CSS réactif mobile affiche-t-il différentes mises en page réactives d'écran @media selon différentes résolutions ?
L'article suivant présentera comment utiliser CSS pour déterminer différentes résolutions et afficher différentes dispositions de largeur pour obtenir une largeur adaptative.
Les amis dans le besoin peuvent s'y référer, j'espère qu'il sera utile à tout le monde.
La différence entre les pages Web de sérigraphie @media et @media
- Si le css doit être utilisé dans un périphérique d'impression, utilisez @media, sinon, utilisez @media screen.
- Cependant, ce n'est pas nécessairement vrai.En fait, si vous remplacez "screen" par "print" et que vous l'écrivez comme @media print, alors le CSS peut être utilisé sur le périphérique d'impression ;
- Mais notez que le css déclaré par @media print n'est valable que sur les périphériques d'impression.
1. Description du petit boîtier DIVCSS
Nous définissons d'abord une boîte DIV CSS nommée ".abc", définissons sa hauteur à 300px et définissons la bordure CSS en noir ;
- et paramètres
margin:0 autoLa mise en page est centrée et ces deux styles sont prédéfinis pour une visualisation facile.
Nous faisons glisser manuellement le navigateur pour afficher la largeur, puis observons comment la largeur de la boîte change :
- Lorsque la largeur du navigateur est ajustée à une largeur ne dépassant pas 500 pixels, 100 pixels s'affichent correspondant à la largeur de la boîte ;
- Lorsque la largeur du navigateur est ajustée pour être inférieure à 901px, ".abc" s'affiche correspondant à la largeur de la boîte, qui affiche 200px ;
- Lorsque la largeur du navigateur est ajustée pour être supérieure à 1201px, la largeur de l'objet box affiche 1200px ;
- Lorsqu'elle est inférieure à 1200px, la largeur d'affichage est de 900px.
2, code adaptatif de terminal mobile de téléphone portable CSS
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */- Il convient de noter que l'ordre du code CSS est de composer le CSS de grand à petit (à en juger par le fait que plus la largeur du navigateur est grande, plus le devant est haut).
- En raison de la relation logique, le jugement de @media sur le débogage CSS entraînera l'échec du jugement.
3. Code HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>Remarque : format d'image de l'appareil
- device-aspect-ratio peut être utilisé pour adapter les appareils avec des proportions d'écran spécifiques, ce qui est également une propriété utile.
- Par exemple, notre page souhaite définir un style pour les écrans normaux avec un rapport d'aspect de 4:3.
- Ensuite, pour les écrans larges 16:9 et 16:10, définissez un autre style, comme la largeur adaptative et la largeur fixe :
- Écran @media uniquement et (device-aspect-ratio : 4/3)
4. Compatible avec les principaux navigateurs code source HTML + CSS + JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIV宽度会随浏览器宽度变化哦，改变浏览器宽度</div>
</body>
</html>Ce qui précède est le CSS adaptatif du terminal mobile, qui affiche différents contenus détaillés réactifs à l'écran @media selon différents écrans.
J'espère que le blog de Chen Weiliang ( https://www.chenweiliang.com/ ) Partagé « Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness », ce qui vous est utile.
Bienvenue à partager le lien de cet article :https://www.chenweiliang.com/cwl-2074.html
Bienvenue sur la chaîne Telegram du blog de Chen Weiliang pour obtenir les dernières mises à jour !
📚 Ce guide contient une valeur énorme, 🌟C'est une opportunité rare, ne la manquez pas ! ⏰⌛💨
Partagez et likez si vous aimez !
Vos partages et likes sont notre motivation continue !