Ta članek prikazuje korake za ustvarjanje odzivnega dizajna spletnega mesta v HTML in CSS z uporabo:
Kako ustvariti odziven dizajn spletne strani s HTML in CSS?
Ustvarjanje odzivnega dizajna spletnega mesta s HTML in CSS vključuje gradnjo postavitve, ki se prilagaja različnim velikostim in ločljivostim zaslona. Sledite korakom za ustvarjanje odzivnega dizajna spletnega mesta:
1. korak: Meta oznaka Viewport
' vidno polje ” meta oznaka igra ključno vlogo pri ustvarjanju odzivnega spletnega oblikovanja. Vstavljen je znotraj '
< meta ime = 'viewport' vsebino = 'width=device-width,initial-scale=1' / >
Zgornja meta oznaka ima dva atributa:
- ' ime ” atribut pove ime funkcionalnosti, za katero je ta oznaka ustvarjena/uporabljena. Na primer, nastavitev » vidno polje ' do ' ime ” za obravnavanje vidnega polja različnih naprav.
- ' vsebino ” atribut definira prejšnjo vrednost atributa. Nastavi širino vsake naprave in spremeni velikost dokumenta/spletne strani na 100 %.
2. korak: Odzivne slike
Ker se velikost slike med seboj razlikuje, je težko nastaviti enako ' višina « ali » premer ” za vsako sliko. Ko je velikost slike določena, uporabniki ne spreminjajo velikosti slike spletne strani z zaslonom. Vendar pa lahko uporabniki nastavijo odzivno sliko prek naslednje kode:
img {
max- premer : 100 %;
}
' največja širina ” Lastnost CSS omejuje prikaz slike znotraj dodeljenega prostora. Z nastavitvijo vrednosti v »%« se velikost slike spremeni skupaj s spremembo velikosti njenega nadrejenega elementa. To ustvari odziven učinek za sliko.
3. korak: postavitev Flexbox
Postavitev Flexbox je zelo priporočljiva za ustvarjanje odzivnega dizajna spletnega mesta. Omogoča, da se elementi HTML prikažejo na določenem mestu in spremenijo velikost razpoložljivega prostora za vsakega podrejenega elementa glede na velikost, ki jo ima nadrejeni div. Postavitev Flexbox vsebuje več lastnosti, ki razvijalcu zagotavljajo veliko svobode, na primer v spodnji kodi:
< stil >
.starš {
zaslon: flex;
}
.otrok {
upogib: 1 ;
besedilo- poravnati : center;
}
< / stil >
< telo >
< div razred = 'starš' >
< div razred = 'otrok' stil = 'obroba: 3px polna modrovijolična;' >Dobrodošli< / div >
< div razred = 'otrok' stil = 'obroba: 3px polna temno zelena;' >za< / div >
< div razred = 'otrok' stil = 'obroba: 3px polna rdeča;' >Linuxint< / div >
< / div >
< / telo >
V zgornjem delčku kode:
- Najprej ustvarite nadrejeni element div z ID-jem ' starš ' znotraj '
' oznaka. - Nato ustvarite več podrejenih elementov div in jim dodelite razred ' otrok ”.
- Nato izberite » starš « in navedite vrednost » flex »za CSS« zaslon ” lastnina.
- Nato vnesite vrednost ' 1 ' do ' flex ' lastnina za vsakega ' otrok ”, zaradi katerega se podrejeni element prikaže kot flex.
Po izvedbi zgornje kode je spletna stran videti takole:
Zgornji izhod prikazuje, da podrejeni element dobiva enako širino, ko se velikost brskalnika spremeni.
4. korak: Postavitev mreže
Mrežna postavitev ustvari mrežo in dodeli elemente HTML znotraj mrežnega dela. Elementi mreže se spreminjajo glede na velikost zaslona spletne strani. Ustvari odziven dizajn, saj se velikost elementa HTML spreminja glede na zaslon naprave:
< stil >.posoda {
prikaz: mreža;
mreža-predloga-stolpci: 1fr 1fr 1fr;
}
< / stil >
< telo >
< div razred = 'komponenta' >
< div stil = 'obroba: 3px polna gozdnozelena;' >Linuxint< / div >
< div stil = 'obroba: 3px polna temno zelena;' >Linuxint< / div >
< div stil = 'obroba: 3px polna rdeča;' >Linuxint< / div >
< / div >
< / telo >
V zgornji kodi:
- Najprej ustvarite nadrejeni div in mu dodelite razred ' komponento ' znotraj '
' oznaka. Nato v njem ustvarite tri podrejene elemente div. - Nato v datoteki CSS dodelite » mreža ' vrednost za ' zaslon ” lastnina za “ posoda ” div.
- Nato ustvarite tri enako velike dele na spletni strani z uporabo ' mreža-predloga-stolpec ' lastnost in jo nastavite na ' 1fr 1fr 1fr ' kjer fr pomeni ' ulomek ”.
Po prevajanju zgornje kode je rezultat videti takole:
Izhod prikaže, da se divi sami spreminjajo v velikost glede na velikost zaslona v enakih razmerjih.
5. korak: Medijske poizvedbe
Uporaba medijskih poizvedb za izdelavo odzivnega dizajna je nekakšna stvar stare šole, a vseeno večina spletnih mest uporablja medijske poizvedbe. Medijske poizvedbe je mogoče dodati neposredno v datoteko CSS po dodajanju privzetega sloga za izbrani element HTML. Medijska poizvedba naredi kodo nekoliko daljšo in neurejeno. Ker mora razvijalec vstaviti kodo za vsako velikost zaslona posebej.
Oglejte si na primer spodnji delček kode:
@ mediji zaslon in ( min- premer : 640 slikovnih pik ) {.sestavni del {
ozadje- barva : gozdnozelena;
}
}
V zgornjem delčku kode:
- Najprej nastavite medijsko poizvedbo, ki uporablja lastnosti CSS za izbrani razred elementov ' komponento «, ko širina velikosti zaslona postane večja od » 640 slikovnih pik ”.
- Nato izberite 'razred komponente in nastavite vrednost' gozdnozelen ' za ' Barva ozadja ” lastnina.
.sestavni del {
ozadje- barva : dodgerblue;
}
}
Nato za zgornji delček kode:
- Nastavite medijsko poizvedbo za uporabo slogov, ko je velikost širine manjša od ' 1000 slikovnih pik ”.
- Zdaj izberite » komponento « in navedite vrednost » dodgerblue ' za ' Barva ozadja ” Lastnost:
Po izvedbi zgornjih delčkov kode je rezultat videti takole:
Izhod prikazuje, da medijska poizvedba spreminja ozadje glede na velikost zaslona. Velikost pisave, širino, višino in druge lastnosti CSS je mogoče uporabiti tudi po istem vzorcu.
Možne velikosti zaslona prekinitvenih točk, ki jih je treba upoštevati pri uporabi medijskih poizvedb, so:
- za ' majhna ' velikost zaslona, nastavite širino manjšo od ' 640 slikovnih pik ”.
- za ' srednje ” velikost zaslona vidnega polja, širina se giblje med „ 641 slikovnih pik « in » 1007 slikovnih pik ”.
- za ' velik ' velikost zaslona, nastavite širino na ' 1008 slikovnih pik « ali več.
Zaključek
Za ustvarjanje odzivnega dizajna spletnega mesta morajo razvijalci dodati » vidno polje ' oznaka v '