Artiklite kataloog
Kuidas kuvab mobiilile reageeriv CSS erinevate @media ekraani tundliku paigutusega vastavalt erinevatele eraldusvõimetele?
Järgmises artiklis tutvustatakse, kuidas kasutada CSS-i erinevate eraldusvõimete määramiseks ja erineva laiusega paigutuste kuvamiseks adaptiivse laiuse saavutamiseks.
Abivajajad sõbrad võivad sellele viidata, loodan, et see on kõigile abiks.
@media ja @media siiditrüki veebilehtede erinevus
- Kui printimisseadmes on vaja kasutada css-i, kasutage @media, vastasel juhul kasutage @media ekraani.
- Kuid see ei pruugi olla tõsi. Tegelikult, kui asendada "ekraan" sõnaga "print" ja kirjutada see @media printina, saab CSS-i printimisseadmes kasutada;
- Kuid ole ettevaatlik, @media printi deklareeritud css kehtib ainult prindiseadmetes.
1. DIVCSS-i väikese juhtumi kirjeldus
Esmalt määrasime DIV-kasti CSS-i nimega ".abc", selle kõrguseks 300 pikslit ja CSS-i ääriseks mustaks;
- ja seaded
margin:0 autoPaigutus on keskel ja need kaks stiili on hõlpsaks vaatamiseks eelseadistatud.
Lohistame brauseri käsitsi laiuse kuvamiseks ja seejärel jälgime, kuidas kasti laius muutub:
- Kui brauseri laius on reguleeritud mitte üle 500 piksli laiuseks, kuvatakse kasti laiusele vastavaks 100 pikslit;
- Kui brauseri laius on reguleeritud väiksemaks kui 901 pikslit, kuvatakse ".abc", mis vastab kasti laiusele, mis kuvab 200 pikslit;
- Kui brauseri laius on reguleeritud suuremaks kui 1201 pikslit, kuvatakse kastiobjekti laiuseks 1200 pikslit;
- Kui see on alla 1200 piksli, on kuva laius 900 pikslit.
2, CSS-i mobiiltelefoni mobiiliterminali adaptiivne kood
.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宽度 */- Tuleb märkida, et CSS-i koodijärjestus on CSS-i trükkimine suurest väikeseks (otsustades, et mida suurem on brauseri laius, seda kõrgem on esiosa).
- Selle põhjuseks on loogiline seos, mille tõttu @media otsus CSS-i silumise kohta ebaõnnestub.
3. HTML-kood
<!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>Märkus: seadme kuvasuhe
- Seadme kuvasuhet saab kasutada konkreetse ekraani kuvasuhtega seadmete sobitamiseks, mis on samuti kasulik omadus.
- Näiteks soovib meie leht defineerida tavaliste ekraanide stiili, mille kuvasuhe on 4:3.
- Seejärel määrake 16:9 ja 16:10 laiekraani jaoks mõni muu stiil, näiteks adaptiivne laius ja fikseeritud laius.
- Ainult @meedia ekraan ja (seadme kuvasuhe: 4/3)
4. Ühildub suuremate brauserite HTML+CSS+JS lähtekoodiga
<!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>Ülaltoodud on mobiiltelefoni adaptiivne CSS, mis kuvab vastavalt erinevatele ekraanidele erinevat @media ekraanile reageerivat üksikasjalikku sisu.
Hope Chen Weiliangi ajaveeb ( https://www.chenweiliang.com/ ) Jagatud "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", mis on teile abiks.
Tere tulemast selle artikli linki jagama:https://www.chenweiliang.com/cwl-2074.html
Tere tulemast Chen Weiliangi ajaveebi Telegrami kanalile, et saada uusimaid värskendusi!
📚 See juhend sisaldab tohutut väärtust, 🌟See on harukordne võimalus, ärge jätke seda kasutamata! ⏰⌛💨
Jaga ja like kui meeldib!
Teie jagamine ja meeldimised on meie pidev motivatsioon!