Mụta otú ihe nchọgharị weebụ na-esi akọwa njirimara site na iji ụkpụrụ pasent
Ọtụtụ ụmụ akwụkwọ nke ntinye weebụ nwere mmeghachi omume nwere oge siri ike na-eji percentages maka ụkpụrụ njedebe. N'ụzọ doro anya, enwere mgbagwoju anya na otu ihe nchọgharị si emepụta pasent ndị ahụ. N'okpuru ebe a, ị ga-ahụ nkọwa zuru ezu nke otu percent percent si arụ ọrụ iji chọpụta ihe dị na ebe nrụọrụ weebụ.
Iji Ndabere Ngwa maka Ụkpụrụ Nha
Mgbe ị na-eji pikselụ dị ka ọnụma obosara, ihe ga-esi na ya pụta. Ọ bụrụ na ị na-eji CSS iji mee ka ọnụ ọgụgụ buru ibu nke ihe dị na nkụnye eji isi mee nke akwụkwọ ruo 100 pixels n'obosara, nke ahụ ga-abụ otu nha nke ị debere 100 pixels n'obosara na ọdịnaya weebụ ma ọ bụ n'okpuru ma ọ bụ n'akụkụ ndị ọzọ nke peeji nke. Pixels bụ uru zuru oke, ya mere, 100 pikselụ bụ 100 pikselụ n'agbanyeghị ebe n'ime akwụkwọ gị ihe mmewere pụtara. O di nwute, ebe ihe pixel di mfe ngh ota, ha adighi adi nma n'ikike weebụsaịtị.
Ethan Marcotte wepụtara okwu ahụ bụ "nzaghachi weebụ", na-akọwa usoro a dị ka nwere isi 3 isi:
- A grid okporo
- Mgbasa mgbasa
- Ajụjụ mgbasa ozi
Ihe abụọ ndị mbụ ahụ, usoro mgbasa ozi na mmiri dị nro, na-enweta site na iji percentages, kama pixels, maka ọnụ ọgụgụ dị ukwuu.
Iji Ugoro Iha Ibu Maka Ụkpụrụ N'uba
Mgbe ị na-eji pasent iji guzobe obosara maka mmewere, nha kpọmkwem nke mmepụta ihe ga-adịgasị iche dabere na ebe ọ dị na akwụkwọ. Pasent percent bụ uru dị mkpa, nke pụtara na egosipụtara na-emetụta ihe ndị ọzọ dị na akwụkwọ gị.
Dịka ọmụmaatụ, ọ bụrụ na ịtọye obosara nke onyinyo ahụ na 50%, nke a apụtaghị na onyinyo ahụ ga-egosipụta na ọkara nke ogo ya. Nke a bụ echiche na-ezighị ezi.
Ọ bụrụ na ihe oyiyi ahụ bụ 600 pixels n'obosara, mgbe ahụ na-eji uru CSS iji gosi ya na 50% apụtaghị na ọ ga-abụ 300 pixels n'obosara na ihe nchọgharị weebụ. A na-agbakọọ uru pasent a dabere na mmewere nke nwere onyinyo ahụ, ọ bụghị nha nha nke onyinyo ahụ n'onwe ya. Ọ bụrụ na akpa (nke nwere ike ịbụ nkewa ma ọ bụ ihe ọzọ HTML mmewere) bụ 1000 pixels n'obosara, mgbe ahụ oyiyi ga-egosipụta na 500 pikselụ ebe ọ bụ uru ahụ bụ 50% nke obosara obosara. Ọ bụrụ na ndị nwere mmewere dị 400 pixels n'obosara, mgbe ahụ ihe oyiyi ahụ ga-egosipụta na 200 pikselụ, ebe ọ bụ na uru bụ 50% nke akpa. Ihe oyiyi na ajụjụ a nwere 50% nke na-adabere kpamkpam na mmewere nke nwere ya.
Cheta na mmepụta a na-anabata anabataghị ya. Ọdịdị ihu na nha ga-agbanwe dị ka nha ihuenyo / ngwaọrụ gbanwere . Ọ bụrụ na ị na-eche banyere nke a na anụ ahụ, nke na-abụghị weebụ, ọ dị ka ịnwe igbe igbeabụ na ị na-ejuputa na ihe ngwugwu. Ọ bụrụ na ị na-ekwu na igbe kwesịrị ọkara jupụtara na ihe ahụ, ọnụego ịkwado dị iche iche ga-adịgasị iche dabere n'ókè nke igbe ahụ. Otu ihe ahụ bụ eziokwu maka pasent percent n'obosara na imewe weebụ.
A na-atụle pasent iri na isi ndị ọzọ
Na ihe oyiyi / akpa, m na-eji akara pikselị maka ihe ndị nwere nwere ike igosi otu esi egosipụta foto ahụ. N'ikwu eziokwu, enwere ihe ndeputa na ihe ndi ozo, n'ime ato ahu ga enweta ihe ha na-adabere na pasent nke pasent.
Nke a bụ ihe atụ ọzọ na-egosi nke a na omume.
Gwa na ị nwere ebe nrụọrụ weebụ ebe ebe ahụ dum dị na nkewa nke nwere "akpa" (otu ihe eji eme weebụ). N'ime nkewa ahụ bụ akụkụ nke atọ ọzọ ị ga - emesị mechie iji gosi dị ka ogidi atọ. HTML ahụ nwere ike iyi nke a:
Ugbu a, ị nwere ike iji CSS iji tọọ nha nke "akpa" ahụ iji kwuo 90%. N'ihe atụ a, ngalaba nke akpa enweghị ihe ọzọ na-agbanye ya ọzọ karịa ahụ, nke anyị na-etinyeghị na uru ọ bụla. Site na ndabara, ahụ ga-eme ka 100% nke windo nchọgharị ahụ. Ya mere, pasent nke "akpa" ahụ ga-adabere n'ogo window windo ahụ. Ka windo nchọgharị ahụ gbanwere nha, otú ahụ ka "akpa" a ga-adị. Ya mere ọ bụrụ na windo windo dị 2000 pixels n'obosara, nke a ga-egosipụta na 1800 pikselụ. A na-agbakọta nke a dịka pasent 90 nke 2000 (2000 x .90 = 1800), nke bụ nha nchọgharị ahụ.
Ọ bụrụ na onye nke ọ bụla n'ime ibe "col" ahụ dị n'ime "akpa" ahụ dị na pasent 30, mgbe nke ọ bụla n'ime ha ga-abụ 540 pixels n'obosara na nke a. A gbakọrọ nke a dịka pasent 30 nke 1800 pixels nke akpa ahụ na-apụta (1800 x .30 = 540). Ọ bụrụ na anyị gbanwee pasent nke akpa ahụ, akụkụ ndị a dị n'ime ga-agbanwekwa na nha ha na-enye ebe ọ bụ na ha dabere na nke ahụ nwere mmewere.
Ka anyị chee na windo windo na-anọgide na 2000 pixels n'obosara, ma anyị na-agbanwe uru pasent nke akpa ahụ ruo 80% kama 90%. Nke ahụ pụtara na ọ ga-akwụghachi na 1600 pixels n'obosara ugbu a (2000 x .80 = 1600). Ọbụna ma ọ bụrụ na anyị anaghị agbanwe CSS maka nha nke 3 "col" nkewa, ma hapụ ha na 30%, ha ga-agbanwe n'ụzọ dị ugbu a ebe ọ bụ na ha nwere mmewere, nke bụ ihe gbara ya gburugburu na ha dị ukwuu, agbanweela. Ndị ahụ nkewa atọ ga-enyezi 480 pixels n'obosara nke ọ bụla, nke bụ 30% nke 1600, ma ọ bụ ụdị akpa ahụ (1600 x .30 = 480).
Na-ewere nke a ọbụna n'ihu, ma ọ bụrụ na e nwere ihe oyiyi n'ime otu "col" nkewa na foto ahụ dị ukwuu site na iji pasent, ihe gbara ya gburugburu ga-abụ "col" n'onwe ya. Dika nkebi nke "col" gbanwere nha, otua ka ihe oyiyi di nime ya. Ya mere, ma ọ bụrụ na ihe nchọgharị ma ọ bụ "akpa" ahụ gbanwere, nke ahụ ga-emetụta ọnụọgụ "col" atọ ahụ, nke ga-agbanwe nke mbiet ahụ n'ime "ogwe." Dịka ị pụrụ ịhụ, a na-ejikọta ha niile ọ na-abata pasent-nke a na-achọsi ike ka ọ dị.
Mgbe ị tụlere otú ihe dị n'ime ibe weebụ ga-esi akwụghachi mgbe a na-eji uru percent maka obosara ya, ị ga-achọ ịghọta ihe gbara ya gburugburu na nke ahụ na-ebi na ntinye akwụkwọ ahụ.
Na nchịkọta
Pasent percent na-arụ ọrụ dị oke egwu n'ịmepụta nhazi maka ebe nrụọrụ weebụ na-anabata . Ma ị bụ ihe oyiyi dị nza ma ọ bụ na-eji pasent percent iji mee ka grid na-adị adị n'ezie, nke nha ya dịka ibe ya, nghọta nke a ga-adị mkpa iji nweta ihe ị chọrọ.