Šajā rakstā ir parādītas darbības, lai izveidotu adaptīvu vietnes dizainu HTML un CSS, izmantojot:
Kā izveidot adaptīvu vietnes dizainu, izmantojot HTML un CSS?
Lai izveidotu adaptīvu vietnes dizainu, izmantojot HTML un CSS, ir jāizveido izkārtojums, kas pielāgojas dažādiem ekrāna izmēriem un izšķirtspējai. Tālāk ir norādītas darbības, kuras varat veikt, lai izveidotu adaptīvu vietnes dizainu.
1. darbība: skatvietas metatags
' skata logs ” metatagam ir būtiska loma adaptīva tīmekļa dizaina izveidē. Tas ir ievietots '
< meta nosaukums = 'skata logs' saturu = 'width=device-width,initial-scale=1' / >
Iepriekš minētajam metatagam ir divi atribūti:
- ' nosaukums ” atribūts norāda tās funkcionalitātes nosaukumu, kurai šis tags ir izveidots/izmantots. Piemēram, iestatot “ skata logs 'uz' nosaukums ” atribūts, lai apstrādātu dažādu ierīču skata logus.
- ' saturu ” atribūts definē iepriekšējo atribūta vērtību. Tas nosaka katras ierīces platumu un mērogo dokumentu/tīmekļa lapu līdz 100%.
2. darbība: atsaucīgi attēli
Tā kā attēla izmēri atšķiras viens no otra, ir grūti iestatīt vienu un to pašu ' augstums ” vai “ platums ” īpašums katram attēlam. Ja attēla izmērs ir fiksēts, lietotāji nemaina tīmekļa lapas attēla izmērus ar ekrānu. Tomēr lietotāji var iestatīt adaptīvo attēlu, izmantojot šādu kodu:
img {
max- platums : 100 %;
}
' maksimālais platums ” CSS rekvizīts ierobežo attēla rādīšanu tam piešķirtajā vietā. Iestatot vērtību “%”, attēla izmērs tiek mainīts kopā ar tā vecākelementa izmēru. Tas rada attēlam atsaucīgu efektu.
3. darbība. Flexbox izkārtojums
Flexbox izkārtojums ir ļoti ieteicams, lai izveidotu adaptīvu vietnes dizainu. Tas ļauj HTML elementiem parādīties noteiktā pozīcijā un mainīt pieejamās vietas lielumu katram bērnam atbilstoši lielumam, kas pieejams vecāka div. Flexbox izkārtojumā ir vairāki rekvizīti, kas izstrādātājam nodrošina lielu brīvību, piemēram, tālāk norādītajā kodā:
< stils >
.vecāks {
displejs: flex;
}
.bērns {
flex: 1 ;
teksts- izlīdzināt : centrs;
}
< / stils >
< ķermeni >
< div klasē = 'vecāks' >
< div klasē = 'bērns' stils = 'apmale: 3 pikseļi, zili violets;' >Laipni lūdzam< / div >
< div klasē = 'bērns' stils = 'apmale: 3 pikseļi vienkrāsains tumši zaļš;' >uz< / div >
< div klasē = 'bērns' stils = 'apmale: 3 pikseļi vienkrāsains sarkans;' >Linuxint< / div >
< / div >
< / ķermeni >
Iepriekš minētajā koda fragmentā:
- Vispirms izveidojiet vecāku div elementu ar ID ' vecāks 'iekšpusē' ” tagu.
- Pēc tam izveidojiet vairākus pakārtotos div elementus un piešķiriet tiem klasi “ bērns ”.
- Pēc tam atlasiet “ vecāks ” klasē un sniedz vērtību “ flex 'CSS' displejs ” īpašums.
- Pēc tam norādiet vērtību “ 1 'uz' flex 'īpašums katram' bērns ” klase, kas liek bērnelementu parādīt kā flex.
Pēc iepriekš minētā koda izpildīšanas tīmekļa lapa izskatās šādi:
Iepriekš redzamajā izvadē tiek parādīts, ka bērna elementa platums kļūst vienāds, kad tiek mainīts pārlūkprogrammas izmērs.
4. darbība: režģa izkārtojums
Režģa izkārtojums izveido režģi un piešķir HTML elementus režģa daļā. Režģa elementi mainās atkarībā no tīmekļa lapas ekrāna izmēra. Tas rada atsaucīgu dizainu, jo HTML elementa lielums mainās atkarībā no ierīces ekrāna:
< stils >.konteiners {
displejs: režģis;
režģis-veidne-kolonnas: 1fr 1fr 1fr;
}
< / stils >
< ķermeni >
< div klasē = 'komponents' >
< div stils = 'apmale: 3px solid mežzaļš;' >Linuxint< / div >
< div stils = 'apmale: 3 pikseļi vienkrāsains tumši zaļš;' >Linuxint< / div >
< div stils = 'apmale: 3 pikseļi vienkrāsains sarkans;' >Linuxint< / div >
< / div >
< / ķermeni >
Iepriekš minētajā kodā:
- Vispirms izveidojiet vecāku div un piešķiriet tai klasi “ komponents 'iekšpusē' ” tagu. Pēc tam izveidojiet tajā trīs pakārtotos div elementus.
- Pēc tam CSS failā piešķiriet “ režģis ' vērtību uz ' displejs 'īpašums priekš' konteiners ” div.
- Pēc tam izveidojiet trīs vienāda izmēra porcijas tīmekļa lapā, izmantojot “ režģis-veidne-kolonna ' rekvizītu un iestatiet to vienādu ar ' 1fr 1fr 1fr kur fr nozīmē ' frakcija ”.
Pēc iepriekš minētā koda apkopošanas izvade izskatās šādi:
Izvadā tiek parādīts, ka divi elementi maina izmērus atbilstoši ekrāna izmēram ar vienādām proporcijām.
5. darbība. Multivides vaicājumi
Multivides vaicājumu izmantošana, lai izveidotu adaptīvu dizainu, ir sava veida vecās skolas lieta, taču lielākā daļa vietņu izmanto multivides vaicājumus. Multivides vaicājumus var pievienot tieši CSS failā pēc noklusējuma stila pievienošanas atlasītajam HTML elementam. Multivides vaicājums padara kodu nedaudz garāku un nekārtīgu. Tā kā izstrādātājam ir jāievieto kods katram ekrāna izmēram atsevišķi.
Piemēram, skatiet tālāk norādīto koda fragmentu:
@ plašsaziņas līdzekļi ekrāns un ( min- platums : 640 pikseļi ) {.komponents {
fons- krāsa : mežzaļš;
}
}
Iepriekš minētajā koda fragmentā:
- Vispirms iestatiet multivides vaicājumu, kas piemēro CSS rekvizītus atlasītajai elementu klasei ' komponents ', ja ekrāna izmēra platums kļūst lielāks par ' 640 pikseļi ”.
- Pēc tam atlasiet “komponentu klasi un iestatiet vērtību “ mežzaļš ' priekš ' fona krāsa ” īpašums.
.komponents {
fons- krāsa : dodgerblue;
}
}
Pēc tam iepriekš norādītajam koda fragmentam:
- Iestatiet multivides vaicājumu, lai piemērotu stilus, ja platuma izmērs ir mazāks par ' 1000 pikseļi ”.
- Tagad atlasiet “ komponents ” klasē un sniedz vērtību “ dodgerblue ' priekš ' fona krāsa ” īpašums:
Pēc iepriekš minēto koda fragmentu izpildes izvade izskatās šādi:
Izvade parāda, ka multivides vaicājums maina fonu, pamatojoties uz ekrāna izmēru. Fonta lielumu, platumu, augstumu un citus CSS rekvizītus var lietot arī, ievērojot to pašu modeli.
Iespējamie pārtraukuma punktu ekrāna izmēri, kas jāņem vērā, izmantojot multivides vaicājumus, ir:
- Priekš ' mazs ' ekrāna izmērs, iestatiet platumu mazāku par ' 640 pikseļi ”.
- Priekš ' vidējs ' skata loga ekrāna izmērs, platums svārstās no ' 641 pikseļi ' un ' 1007 pikseļi ”.
- Priekš ' liels ' ekrāna izmērs, iestatiet platumu uz ' 1008 pikseļi ” vai vairāk.
Secinājums
Lai izveidotu adaptīvu vietnes dizainu, izstrādātājiem ir jāpievieno “ skata logs ' atzīme sadaļā '