Teine tegur, mis aitab keskenduda mobiilipõhisele disainile, on see, et enamik inimesi pääseb Internetti oma mobiilseadmete kaudu, mis on 60%. Kuigi ainult 20% inimestest kasutab internetti lauaarvutites.
See artikkel hõlmab juhiseid mobiilipõhise tundliku kujunduse loomiseks.
Kuidas seadistada esmalt mobiilile reageeriv disain?
Responsiivse disaini, olenemata sellest, kas see on esmalt reageeriv mobiilile või suurematele ekraanidele, saab luua alltoodud meetoditega.
- Looge esmalt mobiilile reageeriv disain.
- Kasutage/kasutage meediapäringut suuremate ekraanide jaoks tundliku kujunduse arendamiseks/loomiseks.
1. meetod: looge esmalt mobiilile reageeriv kujundus
Esiteks alustage mobiilipõhise disaini lähenemisviisi loomisest. Selleks järgige alltoodud samm-sammult juhiseid.
1. samm: looge HTML-struktuur
Esmalt looge HTML-i struktuur ja lisage ' Bootstrap ” jaotises
< ul >
< et >< a href = '#' > Kodu < / a >< / et >
< et >< a href = '#' > Meist < / a >< / et >
< et >< a href = '#' > Meie teenused < / a >< / et >
< et >< a href = '#' > Võta meiega ühendust < / a >< / et >
< / ul >
< / ei>
< / päis>
< h1 > Tere tulemast Linuxi vihjesse < / h1 >
< lk > Õpetuste veebisait. < / lk >
< / jaotis>
< / peamine>
< lk > Linuxi vihje Autoriõigus < / lk >
< / jalus>
< / keha >
2. samm: rakendage CSS-i
Kehaosas määrake ' font-perekond ' kuni ' ilma serifita ”. Määrake ka polsterdus, veeris ja taustavärv. Pärast seda rakendage päisele, jalusele ja navigeerimisele CSS-i:
keha {font-perekond : ilma serifita ;
marginaal : 0 ;
polsterdus : 0 ;
taustavärv : #808080 ;
}
päis {
taustavärv : lilla ;
värvi : valge ;
polsterdus : 8 pikslit ;
}
nav ul {
list-stiilis-tüüp : mitte ühtegi ;
polsterdus : 0 ;
marginaal : 0 ;
}
nende laev {
marginaal : 4 pikslit 0 ;
}
nav ul li a {
värvi : valge ;
tekst-kaunistus : mitte ühtegi ;
}
peamine {
polsterdus : 18 pikslit ;
}
jalus {
taustavärv : roosa ;
värvi : valge ;
teksti joondamine : Keskus ;
polsterdus : 8 pikslit ;
}
Nagu võib täheldada, kinnitas allolev väljund, et disain reageerib esmalt mobiilile:
2. meetod: kasutage suuremate ekraanide jaoks tundliku kujunduse loomiseks meediumipäringuid
Ülaltoodud kujundust saab luua ka suurematele ekraanidele nagu tahvelarvutid ja lauaarvutid. Selleks peavad kasutajad CSS-i lisama meediumipäringu. Tahvelarvutite laius on ' 786 pikslit 'ja lauaarvutite jaoks on ' 1024 pikslit ”.
Meediapäringute rakendamiseks lisage esmalt ' @meedia ” sildi CSS-failis. Pärast seda määrake atribuut 'min-width' kui ' 768 pikslit ”. See tähendab, et kui minimaalne ekraanisuurus „768 pikslit” või suurem on täidetud, rakendub järgmine CSS:
@meedia ( min-laius : 768 pikslit ) {keha {
fondi suurus : 14 pikslit ;
}
päis {
polsterdus : 18 pikslit ;
}
nav ul {
kuva : painduv ;
}
nende laev {
marginaal : 0 8 pikslit ;
}
peamine {
kuva : painduv ;
õigustama-sisu : tühik-vahel ;
joondada-üksused : Keskus ;
}
jalus {
polsterdus : 18 pikslit ;
}
}
Allolev väljund näitas, et disain on tundlik ka suurematel ekraanidel:
Järeldus
Mobiilipõhiselt reageeriva kujunduse seadistamiseks looge esmalt HTML-struktuur ja lisage vaateport. Pärast seda linkige peasildis CSS-fail. Seejärel rakendage CSS-i, mis põhineb mobiilile esmalt reageerival kujundusel. Lisaks saavad kasutajad lisada CSS-i meediumipäringu, et seda mobiilseadmes kohandada. See kirjutis on näidanud üksikasjalikku protseduuri mobiilipõhise tundliku disaini seadistamiseks.