Imenik člankov
Kako mobilni odzivni CSS prikazuje različne odzivne postavitve zaslona @media glede na različne ločljivosti?
Naslednji članek bo predstavil, kako uporabiti CSS za določanje različnih ločljivosti in prikaz različnih postavitev širine za doseganje prilagodljive širine.
Prijatelji v stiski se lahko obrnejo nanj, upam, da bo vsem v pomoč.
Razlika med @media in @media sitotisk spletnih strani
- Če je treba css uporabiti v tiskalni napravi, uporabite @media, sicer uporabite @media screen.
- Vendar to ni nujno res. Pravzaprav, če zamenjate "screen" z "print" in ga zapišete kot @media print, potem lahko CSS uporabite v tiskalni napravi;
- Upoštevajte pa, da je css, ki ga deklarira @media print, veljaven samo v tiskalniških napravah.
1. Opis majhnega primera DIVCSS
Najprej smo nastavili CSS polja DIV z imenom ".abc", nastavili njegovo višino na 300 slikovnih pik in nastavili rob CSS na črno;
- in nastavitve
margin:0 autoPostavitev je na sredini in ta dva sloga sta vnaprej nastavljena za lažji ogled.
Ročno povlečemo brskalnik, da prikažemo širino, in nato opazujemo, kako se spreminja širina polja:
- Ko je širina brskalnika nastavljena na širino največ 500 slikovnih pik, je prikazanih 100 slikovnih pik, ki ustrezajo širini polja;
- Ko je širina brskalnika nastavljena na manj kot 901 slikovnih pik, se prikaže ».abc«, ki ustreza širini polja, ki prikazuje 200 slikovnih pik;
- Ko je širina brskalnika nastavljena tako, da je večja od 1201 slikovnih pik, se prikaže širina predmeta okvirja 1200 slikovnih pik;
- Ko je manjša od 1200 slikovnih pik, je širina zaslona 900 slikovnih pik.
2, prilagodljiva koda mobilnega telefona mobilnega terminala 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宽度 */- Upoštevati je treba, da vrstni red kode CSS postavlja CSS od velikega do majhnega (glede na to, da večja kot je širina brskalnika, višja je sprednja stran).
- To je zaradi logičnega razmerja, presoja @media o odpravljanju napak CSS povzroči, da presoja ne bo uspela.
3. HTML koda
<!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>Opomba: razmerje stranic naprave
- device-aspect-ratio lahko uporabite za prilagajanje naprav z določenimi razmerji stranic zaslona, kar je prav tako uporabna lastnost.
- Na primer, naša stran želi določiti slog za običajne zaslone z razmerjem stranic 4:3.
- Nato za široki zaslon 16:9 in 16:10 določite drug slog, na primer prilagodljivo širino in fiksno širino:
- @media only zaslon in (device-aspect-ratio:4/3)
4. Združljiv z glavnimi brskalniki HTML+CSS+JS izvorna koda
<!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>Zgoraj je prilagodljiv CSS mobilnega terminala, ki prikazuje različno podrobno vsebino, odzivno na zaslon @media, glede na različne zaslone.
Blog Hope Chen Weiliang ( https://www.chenweiliang.com/ ) V skupni rabi »Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness«, ki vam je v pomoč.
Dobrodošli, da delite povezavo tega članka:https://www.chenweiliang.com/cwl-2074.html
Dobrodošli na kanalu Telegram spletnega dnevnika Chena Weilianga, kjer boste prejeli najnovejše posodobitve!
📚 Ta vodnik ima ogromno vrednosti, 🌟To je redka priložnost, ne zamudite je! ⏰⌛💨
Delite in všečkajte, če vam je všeč!
Vaše deljenje in všečki so naša stalna motivacija!