Ipinapakita ng artikulong ito ang mga hakbang upang lumikha ng tumutugon na disenyo ng website sa HTML at CSS gamit ang:
Paano Gumawa ng Tumutugon na Disenyo ng Website na may HTML at CSS?
Ang paggawa ng tumutugon na disenyo ng website na may HTML at CSS ay nagsasangkot ng pagbuo ng layout na umaangkop sa iba't ibang laki at resolution ng screen. Narito ang mga hakbang na maaari mong sundin upang lumikha ng tumutugon na disenyo ng website:
Hakbang 1: Viewport Meta Tag
Ang ' viewport ” Ang meta tag ay may mahalagang papel sa paglikha ng tumutugon na disenyo ng web. Ito ay ipinasok sa loob ng '
< meta pangalan = 'viewport' nilalaman = 'width=device-width, initial-scale=1' / >
Ang meta tag sa itaas ay may dalawang katangian:
- Ang ' pangalan ” attribute ay nagsasabi sa pangalan ng functionality kung saan ginawa/ginamit ang tag na ito. Halimbawa, ang pagtatakda ng ' viewport ' sa ' pangalan ” attribute upang harapin ang viewport ng iba't ibang device.
- Ang ' nilalaman Tinutukoy ng katangian ng ” ang dating value ng attribute. Itinatakda nito ang lapad ng bawat device at sinusuri ang dokumento/webpage sa 100%.
Hakbang 2: Tumutugon na Mga Larawan
Dahil ang laki ng imahe ay nag-iiba sa bawat isa, samakatuwid, mahirap itakda ang parehong ' taas 'o' lapad ” property para sa bawat larawan. Kapag naayos na ang laki ng larawan, hindi na babaguhin ng mga user ang larawan ng webpage gamit ang screen. Gayunpaman, maaaring itakda ng mga user ang tumutugon na larawan sa pamamagitan ng sumusunod na code:
img {
max- lapad : 100 %;
}
Ang ' max-width ” Pinipigilan ng pag-aari ng CSS ang imahe mula sa pagpapakita sa loob ng inilalaan nitong espasyo. Sa pamamagitan ng pagtatakda ng halaga sa '%', ang imahe ay nagre-resize kasama ng resize ng parent element nito. Lumilikha ito ng tumutugon na epekto para sa larawan.
Hakbang 3: Flexbox Layout
Ang layout ng Flexbox ay lubos na inirerekomenda upang lumikha ng isang tumutugon na disenyo ng website. Pinapayagan nito ang mga elemento ng HTML na magpakita sa isang tiyak na posisyon at baguhin ang laki ng magagamit na espasyo para sa bawat bata ayon sa laki na magagamit ng parent div. Ang layout ng Flexbox ay naglalaman ng ilang mga katangian na nagbibigay ng maraming kalayaan sa developer tulad ng nasa ibaba ng code:
< istilo >
.magulang {
display: flex;
}
.bata {
ibaluktot: 1 ;
text- ihanay : gitna;
}
< / istilo >
< katawan >
< div klase = 'magulang' >
< div klase = 'bata' istilo = 'border: 3px solid blueviolet;' >Maligayang pagdating< / div >
< div klase = 'bata' istilo = 'border: 3px solid darkgreen;' >sa< / div >
< div klase = 'bata' istilo = 'border: 3px solid red;' >Linux< / div >
< / div >
< / katawan >
Sa snippet ng code sa itaas:
- Una, gumawa ng parent div element na may id na ' magulang ' sa loob ng '
” tag. - Susunod, lumikha ng maraming elemento ng child div at magtalaga sa kanila ng isang klase ng ' anak ”.
- Pagkatapos, piliin ang ' magulang ” class at ibigay ang halaga ng “ baluktot 'para sa CSS' display ” ari-arian.
- Pagkatapos nito, magbigay ng halaga ng ' 1 ' sa ' baluktot ' ari-arian sa bawat ' anak ” klase na nagpapalabas ng elemento ng bata bilang isang pagbaluktot.
Pagkatapos isagawa ang code sa itaas, ganito ang hitsura ng webpage:
Ang output sa itaas ay nagpapakita na ang child element ay nakakakuha ng pantay na lapad kapag ang browser ay na-resize.
Hakbang 4: Grid Layout
Ang layout ng grid ay lumilikha ng isang grid at nagtatalaga ng mga elemento ng HTML sa loob ng bahagi ng grid. Ang mga elemento ng grid ay nagbabago kaugnay sa laki ng screen ng webpage. Lumilikha ito ng tumutugon na disenyo habang nagbabago ang laki ng elemento ng HTML ayon sa screen ng device:
< istilo >.lalagyan {
display: grid;
grid-template-column: 1fr 1fr 1fr;
}
< / istilo >
< katawan >
< div klase = 'bahagi' >
< div istilo = 'border: 3px solid forestgreen;' >Linux< / div >
< div istilo = 'border: 3px solid darkgreen;' >Linux< / div >
< div istilo = 'border: 3px solid red;' >Linux< / div >
< / div >
< / katawan >
Sa code sa itaas:
- Una, lumikha ng isang parent div at italaga ito ng isang klase ng ' sangkap ' sa loob ng '
” tag. Pagkatapos nito, lumikha ng tatlong elemento ng child div dito. - Pagkatapos, sa CSS file magtalaga ng ' grid 'halaga sa' display ' ari-arian para sa ' lalagyan ” div.
- Pagkatapos nito, lumikha ng tatlong magkaparehong laki ng mga bahagi sa webpage gamit ang ' grid-template-column ” property at itakda itong katumbas ng “ 1fr 1fr 1fr 'kung saan ang ibig sabihin ng fr' maliit na bahagi ”.
Matapos i-compile ang code sa itaas, ang output ay ganito:
Ipinapakita ng output na binabago ng mga div ang kanilang mga sarili ayon sa laki ng screen na may pantay na sukat.
Hakbang 5: Mga Query sa Media
Ang paggamit ng mga query sa media upang gumawa ng tumutugon na disenyo ay isang uri ng lumang-paaralan na bagay ngunit gayon pa man, karamihan sa mga website ay gumagamit ng mga query sa media. Ang mga query sa media ay maaaring direktang idagdag sa CSS file pagkatapos idagdag ang default na istilo para sa napiling elemento ng HTML. Ang media query ay ginagawang mas mahaba at magulo ang code. Dahil kailangan ng developer na maglagay ng code para sa bawat laki ng screen nang hiwalay.
Halimbawa, tingnan ang snippet ng code sa ibaba:
@ media screen at ( min- lapad : 640px ) {.sangkap {
background- kulay : forestgreen;
}
}
Sa snippet ng code sa itaas:
- Una, itakda ang query ng media na naglalapat ng mga katangian ng CSS sa napiling klase ng elemento ' sangkap ' kapag ang lapad ng laki ng screen ay lumampas sa ' 640px ”.
- Susunod, piliin ang 'klase ng bahagi at itakda ang halaga ng ' forestgreen ' para sa ' kulay ng background ” ari-arian.
.sangkap {
background- kulay : dodgeblue;
}
}
Pagkatapos para sa snippet ng code sa itaas:
- Itakda ang query ng media upang maglapat ng mga istilo kapag ang laki ng lapad ay mas maliit kaysa sa ' 1000px ”.
- Ngayon, piliin ang ' sangkap ” class at magbigay ng halaga ng “ dodgeblue ' para sa ' kulay ng background ” ari-arian:
Pagkatapos isagawa ang mga snippet ng code sa itaas, ganito ang hitsura ng output:
Ipinapakita ng output na binabago ng media query ang background batay sa laki ng screen. Ang laki ng font, lapad, taas, at iba pang mga katangian ng CSS ay maaari ding ilapat sa pamamagitan ng pagsunod sa parehong pattern.
Ang mga posibleng laki ng screen ng mga breakpoint na isasaalang-alang habang ginagamit ang mga query sa media ay:
- para sa ' maliit ' laki ng screen, itakda ang lapad na mas maliit kaysa sa ' 640px ”.
- para sa ' daluyan ' laki ng screen ng viewport, ang lapad ay nasa pagitan ng ' 641px 'at' 1007px ”.
- para sa ' malaki ' laki ng screen, itakda ang lapad sa ' 1008px ” o higit pa.
Konklusyon
Upang lumikha ng tumutugon na disenyo ng website, kailangang idagdag ng mga developer ang ' viewport 'tag sa '