Selles postituses mainitakse meediapäringute rakendamiseks vajalikke juhiseid.
Kuidas rakendada mobiilseadmete meediapäringuid?
Meediapäringut saab rakendada mobiilseadmetele, mainides lihtsalt „ @meedia ” sildi ja täpsustades ekraani suuruse väikestes sulgudes. Seejärel saab selle meediumipäringu CSS-i lisada lokkis sulgudesse. Kui ekraani suurus vastab kasutaja määratud suurusele, rakendab see märgitud meediumipäringu.
Vaatame praktilist näidet, et õppida mobiilseadmetes meediumipäringute rakendamist.
Näide: looge paigutus, mis muutub kahe veeru paigutusest ühe veeru paigutuseks, rakendades meediumipäringuid
Allolevas näites muutub veebilehe paigutus veerupaigutusest üheveeruliseks.
1. samm: looge HTML-struktuur
- Esiteks looge HTML-fail ja linkige selles väline CSS-laaditabeli fail
osa. - Seejärel looge a
jaotist ja lisage veebisaidi pealkiri, kasutades nuppu tag. - Loo klassi nimega 'container-class' ja veel kahelselle sees on klassi nimi ' veerg ”. < keha >
< h1 > Linuxi vihje < / h1 >
< / päis>
< div klass = 'konteineriklass' >
< div klass = 'veerg' >
< h2 > Esimene jaotis < / h2 >
< lk > Linux Hint on üks parimaid e-õppe platvorme. < / lk >
< / div >
< div klass = 'veerg' >
< h2 > Teine osa < / h2 >
< lk > Linux Hint on üks parimaid e-õppe platvorme. < / lk >
< / div >
< / div >
< / keha >2. samm: rakendage CSS-i
Kehaosas:- Esmalt määrake kehaosa, kirjutades ' keha ” silti ja mainides lokkis trakse.
- Sulgudes määrake fondiperekond, taustavärv, veeris ja polster.
peal
jaotis:
- Määrake teksti värv, teksti joondus, taustavärv ja polster.
peal 'konteineriklass' div:
- Määra ' kuva ' vara väärtus väärtusele ' painduv Flexboxi loomiseks.
- Kasuta ' õigustama-sisu ”, et lisada sisu vahele tühiku ja lisada polsterdust.
Veeru klassi kohta:
- Esmalt määrake väljale ' painduv ” atribuut, et lisada kahe paigutuse jaotise vahele tühik.
- Pärast seda lisage taustavärv, ääris, polster ja kasti suurus.
3. samm: rakendage meediumipäring
- Meediumipäringu rakendamiseks mobiilseadmetele lisage esmalt ' @meedia ” silti.
- Seejärel määrake väärtus ' 768 pikslit ', mis on tüüpiline mobiilseadmete jaoks maksimaalne laius ” vara väikeste breketite sees.
- Pärast seda määrake ' veerg ' väärtus väärtusele ' painduv suund ” vara, mis rakendub konteiner-klass” klass. See muudab kaks veergu üheks veeruks, kui tuvastatakse määratud ekraanisuurus.
- Lõpuks rakendage CSS-i jaotises ' veerg ” klassi ja määrake „ marginaal ” ja „ painduv ' väärtused:
fondiperekond: sans-serif;
taust- värvi : hõbedane;
marginaal: 0 ;
polsterdus: 0 ;
}
päis {
taust- värvi : #2f4f4f;
polsterdus: 20px;
tekst- joondada : Keskus;
värvi : valge;
}
.container- klass {
ekraan: flex;
õigustama- sisu : tühik-vahel;
polster: 20px;
}
.veerg {
paindumine: 0 1 arvut ( viiskümmend %–10 pikslit ) ;
piir : 1px roheline;
taust- värvi : valge;
box-sizing: border-box;
polster: 20px;
}
@ meedia ( max- laius : 768 pikslit ) {
.container- klass {
paindesuund: veerg;
}
.veerg {
paindumine: 0 1 100 %;
veeris-alumine: 20px;
}
}Väljund
Siin on veebilehe väljund pärast meediumipäringu rakendamist. See väljund on kaheveeruline reageeriv paigutus:
Kui ekraan vastab mobiilile mõeldud meediumipäringu abil määratud mõõtmetele, muutub see ühe veeru paigutuseks.
Järeldus
Meediumipäringute rakendamiseks mobiilseadmete jaoks lisage esmalt ' vaateava ' jaotises ' pea ” jaotis. Seejärel kirjutage mobiilidisainipõhine CSS. Pärast seda lisage meediumipäring, kasutades märgendit „@media” ja määrates mobiiliekraani suuruse. Näiteks määrake tahvelarvutite jaoks 768 pikslit ja mobiiltelefonide jaoks 480 pikslit. Selles artiklis on selgitatud mobiilseadmete meediapäringute rakendamise protseduuri.