Mobilni prilagodljivi CSS različni zasloni prikazujejo različno odzivnost zaslona @media

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 nastavitvemargin: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:

1. Ko je širina brskalnika nastavljena na širino največ 500 slikovnih pik, je prikazanih 100 slikovnih pik, ki ustrezajo širini polja;
2. Ko je širina brskalnika nastavljena na manj kot 901 slikovnih pik, se prikaže ».abc«, ki ustreza širini polja, ki prikazuje 200 slikovnih pik;
3. Ko je širina brskalnika nastavljena tako, da je večja od 1201 slikovnih pik, se prikaže širina predmeta okvirja 1200 slikovnih pik;
4. 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.