See artikkel tutvustab samme, kuidas luua HTML- ja CSS-is tundlik veebisaidi kujundus, kasutades järgmist:
Kuidas luua reageeriv veebisaidi kujundus HTML-i ja CSS-i abil?
Reageeriva veebisaidi kujunduse loomine HTML-i ja CSS-iga hõlmab paigutuse loomist, mis kohandub erinevate ekraanisuuruste ja eraldusvõimetega. Siin on juhised, mida saate järgida tundliku veebisaidi kujunduse loomiseks.
1. samm: vaateakna metasilt
' vaateava ” metasildil on tundliku veebidisaini loomisel ülitähtis roll. See sisestatakse '
< meta nimi = 'vaateava' sisu = 'width=device-width,initial-scale=1' / >
Ülaltoodud metasildil on kaks atribuuti:
- ' nimi ” atribuut ütleb funktsiooni nime, mille jaoks see silt luuakse/kasutatakse. Näiteks määrates ' vaateava ' juurde ' nimi ” atribuut erinevate seadmete vaateava käsitlemiseks.
- ' sisu ” atribuut määrab eelmise atribuudi väärtuse. See määrab iga seadme laiuse ja skaleerib dokumendi/veebi 100%-ni.
2. samm: reageerivad pildid
Kuna kujutise suurus on üksteisest erinev, on raske sama ' kõrgus ” või „ laius ” omadus iga pildi jaoks. Kui pildi suurus on fikseeritud, ei muuda kasutajad veebilehe kujutise suurust koos ekraaniga. Kasutajad saavad aga tundliku pildi määrata järgmise koodi abil:
img {
max- laius : 100 %;
}
' maksimaalne laius ” CSS-i atribuut piirab pildi kuvamist sellele eraldatud ruumis. Kui määrate väärtuse '%', muutub pildi suurus koos selle emaelemendi suuruse muutmisega. See loob pildile reageeriva efekti.
3. samm: Flexboxi paigutus
Responsiivse veebisaidi kujunduse loomiseks on väga soovitatav kasutada Flexboxi paigutust. See võimaldab HTML-i elemente kuvada teatud kohas ja muuta iga lapse jaoks saadaoleva ruumi suurust vastavalt vanema divisjoni saadaolevale suurusele. Flexboxi paigutus sisaldab mitmeid atribuute, mis annavad arendajale palju vabadust, näiteks allolevas koodis:
< stiilis >
.vanem {
ekraan: flex;
}
.laps {
paindumine: 1 ;
tekst- joondada : Keskus;
}
< / stiilis >
< keha >
< div klass = 'vanem' >
< div klass = 'laps' stiilis = 'ääris: 3 pikslit siniviilla;' >Tere tulemast< / div >
< div klass = 'laps' stiilis = 'ääris: 3 pikslit tahke tumeroheline;' >to< / div >
< div klass = 'laps' stiilis = 'ääris: 3px pidev punane;' >Linuxint< / div >
< / div >
< / keha >
Ülaltoodud koodilõigul:
- Esmalt looge ülemelement div ID-ga ' lapsevanem ' sees '
” silti. - Järgmisena looge mitu alam-div-elementi ja määrake neile klass ' laps ”.
- Seejärel valige ' lapsevanem ' klassi ja esitage väärtus ' painduv 'CSS-i jaoks' kuva ” vara.
- Pärast seda sisestage väärtus ' 1 ' juurde ' painduv 'vara igale' laps ” klass, mis paneb alamelemendi kuvama painduvana.
Pärast ülaltoodud koodi käivitamist näeb veebileht välja selline:
Ülaltoodud väljund näitab, et alamelement muutub brauseri suuruse muutmisel võrdseks.
4. samm: ruudustiku paigutus
Ruudustiku paigutus loob ruudustiku ja määrab ruudustiku osa sees olevad HTML-i elemendid. Ruudustiku elemendid muutuvad vastavalt veebilehe ekraanisuurusele. See loob tundliku kujunduse, kuna HTML-i elemendi suurus muutub vastavalt seadme ekraanile:
< stiilis >.konteiner {
ekraan: ruudustik;
ruudustik-mall-veerud: 1fr 1fr 1fr;
}
< / stiilis >
< keha >
< div klass = 'komponent' >
< div stiilis = 'ääris: 3px tahke metsaroheline;' >Linuxint< / div >
< div stiilis = 'ääris: 3 pikslit tahke tumeroheline;' >Linuxint< / div >
< div stiilis = 'ääris: 3px pidev punane;' >Linuxint< / div >
< / div >
< / keha >
Ülaltoodud koodis:
- Kõigepealt looge ülemdiv. ja määrake sellele klass ' komponent ' sees '
” silti. Pärast seda looge selles kolm alamelementi. - Seejärel määrake CSS-failis ' võre ' väärtus väärtusele ' kuva ' kinnisvara ' konteiner ” div.
- Pärast seda looge veebilehel kolm võrdse suurusega portsjonit, kasutades ' ruudustik-mall-veerg ' atribuut ja määrake see võrdseks väärtusega ' 1fr 1fr 1fr kus fr tähendab ' murdosa ”.
Pärast ülaltoodud koodi koostamist näeb väljund välja järgmine:
Väljund kuvab, et divid muudavad enda suurust vastavalt ekraani suurusele võrdsetes proportsioonides.
5. samm: meediumipäringud
Meediapäringute kasutamine tundliku disaini loomiseks on omamoodi vana kooli asi, kuid enamik veebisaite kasutab siiski meediapäringuid. Meediumipäringuid saab lisada otse CSS-faili pärast valitud HTML-elemendi vaikestiili lisamist. Meediapäring muudab koodi pisut pikemaks ja segaseks. Kuna arendaja peab iga ekraani suuruse jaoks koodi sisestama eraldi.
Näiteks vaadake allolevat koodilõiku:
@ meedia ekraan ja ( min- laius : 640 pikslit ) {.komponent {
taust- värvi : metsaroheline;
}
}
Ülaltoodud koodilõigul:
- Esmalt määrake meediumipäring, mis rakendab valitud elemendiklassile CSS-i atribuute komponent ' kui ekraani laius on suurem kui ' 640 pikslit ”.
- Järgmisena valige 'komponendiklass ja määrake väärtus' metsaroheline ' Selle eest ' taustavärv ” vara.
.komponent {
taust- värvi : dodgerblue;
}
}
Seejärel ülaltoodud koodilõigu jaoks:
- Määrake meediumipäring laadide rakendamiseks, kui laiuse suurus on väiksem kui ' 1000 pikslit ”.
- Nüüd valige ' komponent ' klassi ja andke väärtus ' dodgerblue ' Selle eest ' taustavärv ” vara:
Pärast ülaltoodud koodilõikude täitmist näeb väljund välja järgmine:
Väljund näitab, et meediumipäring muudab tausta vastavalt ekraani suurusele. Sama mustrit järgides saab rakendada ka fondi suurust, laiust, kõrgust ja muid CSS-i atribuute.
Võimalikud katkestuspunktide ekraanisuurused, mida meediumipäringute kasutamisel arvesse võtta, on järgmised:
- ' jaoks' väike ' ekraani suurus, määrake laius väiksemaks kui ' 640 pikslit ”.
- ' jaoks' keskmine ' vaateava ekraani suurus, laius jääb vahemikku ' 641 pikslit ” ja „ 1007 pikslit ”.
- ' jaoks' suur ' ekraani suurus, määrake laiuseks ' 1008 pikslit ” või suurem.
Järeldus
Responsiivse veebisaidi kujunduse loomiseks peavad arendajad lisama ' vaateava ' silt jaotises '