Chinhu chekutanga vavarongi vakawanda vanofunga pavanenge vachivaka peji yavo yepawebhu ndeyekusarudzwa kwekugadzira. Izvi zvinonyanya kukoshesa kusarudza kuti yakawanda sei yakagadzirirwa iwe. Hapana chimwe chinhu chakadaro zvakare sezveruzhinji webhuwandu hwewebsite.
Sei uchifunga kugadziriswa
Muna 1995, muongorori wepamusoro we 640x480 kutarisa kwaive kwakanyanya uye yakanakisisa vatariri varipo. Izvi zvaireva kuti web design vakagadzirisa pakuita mapeji aitaridzika zvakanaka mumavhidhiyo ewebhu akawedzerwa pa 12-inch kusvika 14-inch monitor pachigadziro ichocho.
Mazuva ano, sarudzo ye 640x480 inoumba zvishoma pane 1 muzana yehuwandu hwepawebsite. Vanhu vanoshandisa makombiyuta ane mazano akawanda akakwirira kusanganisira 1366x768, 1600x900 uye 5120x2880. Mune zviitiko zvakawanda, kugadzira 1366x768 sarudzo yechinyorwa inoshanda.
Isu tiri pane imwe nguva munhoroondo yewebhu web design apo hatifaniri kunyanya kunetseka pamusoro pekugadzirisa. Vanhu vazhinji vane huru, yakareba-maziso uye havangowedzera browser yavo yewindo. Saka kana ukasarudza kugadzira peji risina kupfuura 1366 pixels yakakura, peji yako inogona kutaridzika zvakanaka mumafasitiriti akawanda evhurairi kunyange pane vakuru vakuru uye mazano makuru.
Browser Width
Usati wapfuurira uchifunga "zvakanaka, ndichaita mapeji angu 1366 mapaundi," pane zvakawanda kune nyaya iyi. Mumwe kazhinji akanganwa dambudziko paanosarudza huwandu hwepeji yewebhu ndeyekuti vatengi vako vanochengetedza sei ma browser. Kunyanya, vanowedzera vashandisi avo pahuwandu hwemahwindo-evha kana vanozvichengeta zviduku pane zvisikwa zvizere here?
Mune imwe sarudzo isina kuzivikanwa yevashandi vese vese vese vakashandisa kambani-yepamusoro 1024x768 yekugadzirisa laptop, maviri vakachengetedza zvese zvekushandira kwavo zvakasimbiswa. Vamwe vose vakanga vane mahwindo akasiyana-siyana akazarurwa nokuda kwezvikonzero zvakasiyana-siyana. Izvi zvinoratidza kuti kana iwe uri kuronga intranet yekambani iyi pa-1024 pixels yakakura, 85 muzana yevashandisi vaizofanira kupenya vachienda kune imwe nzvimbo kuti vaone peji rose.
Mushure mokunge maverengera kune vatengi vanowedzera kana kuti kwete, funga nezvekushandura kwemhepo. Yese yewebhu yebhundaneti ine bhari yepumburu uye miganhu kumativi ayo anoderedza nzvimbo iripo kubva pane mazana 800 zvichikomba 740 pixels kana zvishoma pamisarudzo ye 800x600 uye nepamusoro pe 980 pixels pane mahwindo akawandisa pane 1024x768 zvasarudzo. Izvi zvinonzi browser "chrome" uye zvinogona kubvisa kubva panzvimbo inoshandiswa yejiji yako yakagadzirwa.
Fixed kana Liquid Width Pages
Iyo chaiyo nhamba yehupamhi haisiyo chete chinhu chaunoda kufungisisa paunenge uchigadzira webhusaiti yako yakafara. Iwewo unofanirwa kusarudza kana iwe uchange uine hupamhi hwakareba kana huwandu hwehuwandu . Mune mamwe mazwi, iwe uchaenda kuhupamhi kune nhamba chaiyo (yakasarudzwa) kana kuti kuzana (yeji)?
Fixed Width
Mapeji akawandisa akafanana chaizvo sezvaanoita. Uhu hwakaiswa pane imwe nhamba uye haishanduki pasinei nokuti mukuru kana kuti muduku chirwere chacho chiri chei. Izvi zvinogona kuva zvakanaka kana iwe uchida chimiro chako kuti chitarise zvakafanana zvisinei kuti yakawanda sei kana kuti kuderedza vasvitsa vevadzidzi vako, asi nzira iyi haifungi nezvevadzidzi vako. Vanhu vane browsers vashoma kupfuura zvigadziro zvenyu vachafanirwa kupararira nechokuita, uye vanhu vane vashandura vakawanda vachave nezvikamu zvizhinji zvisina chinhu pachikona.
Kuti ugadzire mapeji akareba akawandisa, ingoshandisa tsanangudzo chaiyo yepikeleri yehupamhi hwepakati peji rako.
Liquid Width
Mapeji akawandisa emvura (dzimwe nguva anonzi mashizha akawandisa mapeji) anosiyana muhupamhi zvichienderana nehuwandu hwindo re browser. Izvi zvinokubvumira kugadzira mapeji anotarisa zvakawanda kune vatengi vako. Dambudziko rine mapeji emvura yakawanda ndeokuti vanogona kuoma kuverenga. Kana iyo yakareba yakareba yemutsetse wemashoko yakareba kupfuura 10 kusvika 12 mashoko kana shoma kupfuura 4 kusvika ku 5 mazwi, zvingava zvakaoma kuverenga. Izvi zvinoreva kuti vateereri vane mahwindo makuru kana zviduku zvebhasiki vane dambudziko.
Kuti uite mapeji akawandisa akawandisa, ingoshandisa zvikamu zvepakati kana ems kwehuwandu hwepakati peji rako. Iwe unofanirwawo kuzvidzidzira neCSS max-width property. Iyi pfuma inokubvumira kuti ugadzire hupamhi mumapepanisi, asi woikora kuitira kuti irege kuwana yakakura zvokuti vanhu havagoni kuiverenga.
Uye Winner Ndiyo: CSS Media Queries
Iyo yakanakisisa yekugadzirisa mazuva ano ndeyokushandisa mibvunzo yeCSS yevhidhiyo uye kugadzirisa kugadzirisa kuumba peji inogadziridza kuhupamhi hwekutsvaga. Inogadzirisa webhutiro yakashandiswa inoshandisa zvimwechetezvo kugadzira peji yewebhu iyo inoshanda kana iwe uchiiona pa 5120 pixels yakakura kana 320 pixels yakakura. Mapeji akasiyana-siyana anotarisa zvakasiyana, asi ane zvinhu zvakafanana. Neyo mhinduro yevhidhiyo muCSS3, imwe neimwe inogamuchira chipinduri inopindura mubvunzo nehukuru hwayo, uye chidimbu chemafirimu chinogadzirisa kuhukuru hwakadaro.