Artikel Verzeechnes
Wéi weist mobil reaktiounsfäeger CSS verschidde @media Écran reaktiounsfäeger Layouten no verschiddene Resolutiounen?
De folgenden Artikel wäert virstellen wéi Dir CSS benotzt fir verschidde Resolutiounen ze bestëmmen a verschidde Breet Layouten ze weisen fir adaptiv Breet z'erreechen.
Frënn an Nout kënnen et bezéien, ech hoffen et wäert jidderengem hëllefräich sinn.
Ënnerscheed tëscht @media an @media Écran Dréckerei Websäiten
- Wann d'CSS an engem Drockapparat muss benotzt ginn, benotzt @media, soss benotzt @mediascreen.
- Dat stëmmt awer net onbedéngt.Tatsächlech, wann Dir "Écran" duerch "Drécken" ersetzt an et als @media Print schreift, da kann d'CSS um Drockapparat benotzt ginn;
- Awer bemierkt datt d'CSS, déi vum @media Print deklaréiert ass, nëmme valabel ass op Drockapparater.
1. DIVCSS klenge Fall Beschreiwung
Mir setzen éischt eng DIV Këscht CSS genannt ".abc", setzen seng Héicht op 300px, a setzen d'CSS Grenz op schwaarz;
- an Astellungen
margin:0 autoDe Layout ass zentréiert, an dës zwee Stiler si virgesinn fir einfach ze gesinn.
Mir zéien de Browser manuell fir d'Breet ze weisen, a beobachten dann wéi d'Breet vun der Këscht ännert:
- Wann d'Breet vum Browser op eng Breet vun net méi wéi 500px ugepasst ass, gëtt 100px ugewisen entspriechend der Breet vun der Këscht;
- Wann d'Breet vum Browser op manner wéi 901px ugepasst ass, gëtt ".abc" ugewisen entspriechend der Breet vun der Këscht, déi 200px weist;
- Wann d'Browser Breet ugepasst ass fir méi wéi 1201px ze sinn, weist d'Breet vum Këschtobjekt 1200px;
- Wann et manner wéi 1200px ass, ass d'Displaybreet 900px.
2, CSS Handy Handy Terminal adaptiven Code
.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宽度 */- Et sollt bemierkt datt d'CSS Code Uerdnung CSS vu grouss op kleng setzt (vu beurteelen datt d'Browserbreet méi grouss ass, wat d'Front méi héich ass).
- Dëst ass wéinst der logescher Bezéiung, dem @media seng Uerteel iwwer CSS Debugging wäert d'Uerteel versoen.
3. HTML Code
<!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>Notiz: Apparat-Aspekt-Verhältnis
- Apparat-Aspekt-Verhältnis ka benotzt ginn fir Apparater mat spezifeschen Écran Aspekt Verhältnisser ze passen, wat och eng nëtzlech Eegeschafte ass.
- Zum Beispill, eis Säit wëll e Stil fir normal Schiirme mat engem Aspekt Verhältnis vu 4:3 definéieren.
- Dann fir 16:9 an 16:10 Widescreen, definéiert en anere Stil, wéi adaptiv Breet a fix Breet:
- @media nëmmen Écran an (Device-Aspect-Ration:4/3)
4. Kompatibel mat grousse Browser HTML + CSS + JS Quelltext
<!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>Dat hei uewen ass de mobilen Terminal adaptiven CSS, deen ënnerschiddlech @media-Bildschirm reaktiounsfäeger detailléiert Inhalt no verschiddene Schiirme weist.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Shared "Mobil Adaptive CSS Different Screens Display Different @media Screen Responsiveness", wat fir Iech hëllefräich ass.
Wëllkomm de Link vun dësem Artikel ze deelen:https://www.chenweiliang.com/cwl-2074.html
Wëllkomm op dem Telegram Kanal vum Chen Weiliang säi Blog fir déi lescht Updates ze kréien!
📚 Dëse Guide enthält en enorme Wäert, 🌟 Dëst ass eng selten Geleeënheet, verpasst et net! ⏰⌛💨
Deelen a liken wann dir wëllt!
Är Deelen a Likes sinn eis kontinuéierlech Motivatioun!