Funda indlela iziphequluli zewebhu ezichonga ngayo umboniso usebenzisa ixabiso leepesenti
Abafundi abaninzi be- design web web ukusabela banenkinga enzima ngokusebenzisa iipesenti zokubaluleka ububanzi. Ngokukodwa, kukho ukudideka ngendlela umkhangeli wesibalo obala ngayo iipesenti. Ngezantsi uzakufumana inkcazo ecacileyo malunga nendlela iipesenti ezisebenza ngayo izibalo ezibanzi kwiwebhusayithi ephendulayo.
Ukusebenzisa iipikseli kwiimilinganiselo ezibanzi
Xa usebenzisa ii-pixels njengexabiso lobubanzi, iziphumo zichanekile. Ukuba usebenzisa i-CSS ukusetha ixabiso elibanzi lento kwi-header yecatshulwa kwii-pixels eziyi-100 ububanzi, loo nto iya kuba ubukhulu obufanayo nolubekwa kwii-pixels eziyi-100 kwi-website yomxholo okanye inyawo okanye ezinye iindawo iphepha. Iipixili zixabiso elipheleleyo, ngoko iipekseli eziyi-100 ziipikseli ezili-100 kungakhathaliseki ukuba kukuphi na kumqulu wakho into ebonakalayo. Ngelishwa, ngelixa ixabiso le-pixel lilula ukuqonda, asebenzi kakuhle kwiiwebhusayithi eziphendulayo.
U-Ethan Marcotte waqulunqa igama elithi "udidi lwe-web design", uchaza le ndlela njengoko iqukethe iinqununu ezi-3 eziphambili:
- Igridi yamanzi
- Imithombo yefluid
- Imibuzo yeendaba
Ezi ngongoma ezimbini zokuqala, igridi yamanzi kunye nemidiya yamanzi, ifumaneka ngokusebenzisa iipesenteji, endaweni yeepekseli, ngokubaluleka kwexabiso.
Ukusebenzisa Amaphesenti kwiimilinganiselo ezibanzi
Xa usebenzisa iepesenti ukuseka ububanzi kwento, ubungakanani boqobo obubonisa ukuba izinto ziyahlukahluka kuxhomekeke kwindawo ekukulo xwebhu. Ipesenti zixabiso lentsapho, okuthetha ukuba ubungakanani obuboniswayo buhambelana nezinye izinto ezikwiphepha lakho.
Ngokomzekelo, ukuba ubeka ububanzi bomfanekiso kwi-50%, oku akuthethi ukuba umfanekiso uya kubonisa kwisiqingatha sobukhulu obuqhelekileyo. Oku kukho ukungaqondi kakuhle.
Ukuba umfanekiso ungama-pixels angama-600 ububanzi, ngoko ukusebenzisa ixabiso leCSS ukulibonisa kwi-50% akuthethi ukuba kuya kuba ngama-pixels angama-300 kwi-browser yewebhu. Le xabiso leepesenti libalwe ngokusekelwe kwinto equlethe loo mfanekiso, kungekhona ubukhulu bomthonyama bomfanekiso ngokwawo. Ukuba isitya (esinokubakho ukwahlula okanye esinye isici se-HTML) singama-pixels angama-1000 ububanzi, ngoko umfanekiso uza kubonisa kwii-pixels ezingama-500 kuba lelo xabiso liyi-50% yobubanzi bebhatyi. Ukuba into equlethwe ngamaphikseli angama-400 ububanzi, ngoko umfanekiso uza kubonisa kuphela kuma-pixels angama-200, kuba loo xabiso i-50% yesitya. Umfanekiso umbuzo apha unamaqondo angama 50% ubukhulu obuxhomekeke ngokupheleleyo kwiqumrhu eliqulethe.
Khumbula, umklamo ophendukileyo uyamanzi. Iimpawu kunye nobukhulu buya kutshintsha njengoko ubukhulu besikrini / ifowuni iyatshintsha . Ukuba ucinga ngale nto kwimimiselo yomzimba, engekho yewebhu, kufana nokuba nebhodi lebhodibhodi ukuba uzalisa izinto zokupakisha. Ukuba uthe loo bhokisi kufuneka ibe nesiqingatha esigcwele loo nto, umlinganiselo wokupakisha oyifunayo uyahluka ngokuxhomekeka kubukhulu bebhokisi. Kuyafana kunjalo neepesenti ububanzi kwi-web design.
Amaphesenti asekelwe kwezinye ipesenti
Kwimifanekiso / umxholo wenkomfa, ndasebenzisa ixabiso leepikseli kwizinto eziqulethe ukubonisa indlela umfanekiso ophendulweyo oza kubonisa ngayo. Enyanisweni, izinto eziqulethwe ziza kusekwa kwipesenti kunye nomfanekiso, okanye ezinye izinto, ngaphakathi kweso sitsha ziza kufumana ixabiso lawo ngokusekelwe kwipesenti yepesenti.
Nasi omnye umzekelo obonisa oku kusebenza.
Yithi unayo iwebhusayithi apho isayithi yonke iqulethwe kwinqanaba leklasi "yesitya" (inkqubo ekhoyo ye-design web). Ngaphakathi kweso sahlulo kukho ezinye izahlulo ezintathu ekugqibeleni uya kugqithisa ukubonisa njengamakholomu amathathu. Le HTML ingabonakala ngathi:
Ngoku, ungasebenzisa i-CSS ukuseta ubukhulu beli qhekeza "isitsha" ukusho i-90%. Kulo mzekelo, ulwahlulo lwezibambiso alinalo enye into ejikeleze ngaphandle komzimba, esiyibekele kuyo nayiphi na ixabiso elithile. Ngokungagqibekanga, umzimba uya kunika njenge-100% yeskrini sesiphequluli. Ngoko ke, ipesenti yeqonga "isitsha" iya kusekelwe kubukhulu befestile. Njengoko le window yowesibhrawuzi ishintsha ngobukhulu, ngokunjalo ubungakanani balo "isitsha". Ngoko ukuba iwindi yokukhupha isiphezulu se-pixels ka-2000, eli candelo liya kubonisa kwii-pixels eziyi-1800. Oku kubalwa njengepesenti ye-90 ye-2000 (2000 x .90 = 1800)), obungakanani ubungqingili.
Ukuba ngamnye ulwahlulo "lwekholeji" olufunyenwe ngaphakathi kwe "inkontila" lubekwe kwisayizi ye-30%, ngamnye ngamnye uya kuba ngu-540 pixels ebanzi kulo mzekelo. Oku kubalwa njenge-30% yama-pixels angama-1800 apho isitya siphelela kwi-1800 x .30 = 540). Ukuba sitshintshile ipesenteji yeso sitya, izahlulo zangaphakathi ziza kutshintsha kwakhona ngobukhulu abazinikezelayo kuba zixhomekeka kwilo qulatho.
Makhe sicinge ukuba iifestile zesiphequluli zihlala kuma-pixels ka-2000 ububanzi, kodwa sitshintsha ixabiso lepesenti yesitya kwi-80% esikhundleni se-90%. Oko kuthetha ukuba kuya kunika ii-pixels ezili-1600 ngoku ngoku (2000 x .80 = 1600). Nangona singatshintshi i-CSS ngobukhulu bezahlulo zethu ezi-3 "zekholeji," kwaye sibashiye kwi-30%, ziya kunika ngoku ngokuhlukileyo ngoku ekubeni i-element yabo eneenkalo, elineemeko eziphakamileyo, ishintshile. Lezo zigaba ezi-3 ziya kunikezela njengama-pixels angama-480 ububanzi nganye, eyi-30% ye-1600, okanye ubukhulu besitya (1600 x .30 = 480).
Ukuthatha oku ngakumbi, ukuba kwakukho umfanekiso ngaphakathi kwelinye lala "maqhekeza" kwaye loo mfanekiso ubukhulu becala usebenzisa ipesenteji, umongo wokubaluleka kwawo uza kuba "ikhole" ngokwayo. Njengoko le nxalenye ye "col" yashintsha ngobukhulu, ngokunjalo umfanekiso ngaphakathi kuyo. Ngoko ukuba ubungakanani bebhrawuza okanye "isitsha" sitshintshile, oko kuya kuthintela ukuhlukana kweentlobo ezintathu, eziza kutshintsha ubukhulu bomfanekiso ngaphakathi "kwikhola." Njengoko ubona, zonke zixhunyiwe xa kufike kwiimilinganiselo zokulinganisa ipesenti.
Xa uqwalasela indlela into ephakathi kwekhasi lewebhu iza kunikwa xa ixabiso lepesenti lisetyenziselwa ububanzi balo, kufuneka uqonde umongo apho loo nto ihlala kwindawo yokukhangela iphepha.
Isishwankathelo
Amaphesenti adlala indima ebalulekileyo ekwakheni ukulungiswa kwewebhusayithi eziphendulayo . Ingaba uyayifaka imifanekiso ngokubhekiselele okanye usebenzisa i-percentage widths ukwenza igridi yamanzi eneziqhamo ezinobungakanani bayo, ukuqonda ezi zibalo kuya kudingekile ukuba ufikelele ekukhangeleni kwakho.