Dzidza kuti mashandisi ewebhu anotarisa sei kuratidza achishandisa mazana emitengo
Vadzidzi vakawanda vekuteerera webhutheni yakagadzikana vane nguva yakaoma vachishandisa zvikamu zvehuwandu hwehutano. Kunyanya, pane kuvhiringidzika nekuti sei musikana anoverenga zvikamu izvi. Pasi apa uchawana tsanangudzo yakajeka yekuti mapeji anoshandiswa sei kuwedzera kuverenga mune webhusaiti inoteerera.
Kushandisa Pixels Kwekuwedzera Kwemitemo
Paunoshandisa mapikiseli sehuwandu hwehuwandu, zvigumisiro zvakanyatsojeka. Kana iwe ukashandisa CSS kuti uise huwandu hwehutengo hwechimwe chinhu chiri mumusoro webhuku kumapikisi zana akareba, ichocho chichave chakakura zvakafanana nechimwe iwe chawakapa ku100 pixels yakakura muhupenyu hwehuwandu hwemashuzha kana dzimwe nzvimbo dze peji. Pixels inokosha zvakakwana, saka mapikisi zana zana mapikiseti zana pasinei nokuti mune dhidhiyo yako chinhu chinooneka. Zvinosuruvarisa, nepo pixel maitiro ari nyore kunzwisisa, haashandi zvakanaka mumawebsite anoteerera.
Ethan Marcotte akabatanidza izwi rokuti "kugadzirisa webhu rakagadzirirwa", achitsanangura nzira iyi seine zvikamu zvitatu zvinokosha:
- A grid grid
- Zvinyorwa zvinotyisa
- Media mhinduro
Aya maonero maviri maviri, girasi yemvura yakasvibirira uye zvinyorwa zvemasvikiro, zvinowanikwa kuburikidza nekushandisa zvikamu, panzvimbo pepikisi, nokuda kwehutano hwemhando.
Kushandisa Percentages Kukura Kwemaitiro
Paunoshandisa mapurojekiti kuti uise hupamhi hwechimwe chinhu, huwandu chaihwo huripo hunoonekwa pane huchasiyana zvichienderana nokuti uri papi. Zvikamu zviyero zvakabatana, zvichireva kuti hukuru hwakaratidzwa hwakaenzana nedzimwe zvikamu mubhuku rako.
Somuenzaniso, kana iwe ukaisa upamhi hwechifananidzo kune 50%, izvi hazvirevi kuti mufananidzo ucharatidza hafu yehukuru hwahwo hunowanikwa. Izvi zvinowanzofungidzira zvisina kururama.
Kana chifananidzo chiri natively 600 pixels yakakura, ipapo kushandisa CSS kukoshesa kuratidza kuri 50% hazvirevi kuti ichava 300 pixels yakakura mu web browser. Iko yepamuko yehuwandu inotarwa zvichibva pane chinhu chinenge chiine chifananidzo ichocho, kwete chizvarwa chechizvarwa chemufananidzo wacho pachako. Kana iyo midziyo (iyo inogona kuve kugoverana kana imwe imwe ye HTML element) iine mapikisi zana akafara, ipapo mufananidzo ucharatidza pa 500 pixels kubva apo iyo kukosha iri 50% yehutakiti hwendarira. Kana iyo ine chinhu icho chiri mazana 400 mapikiseti akareba, ipapo mufananidzo unongoratidza pa 200 pixels, sezvo kukosha ikoko kuri 50% yegiyo. Mifananidzo iri mubvunzo pano ine 50% yakakura inoenderana zvachose pane icho chiri nacho.
Yeuka, kugadzirisa kwakagadzirwa kwakasviba. Zvirongwa uye masero zvichachinja sezvo svinga rekrini / chimbo chinoshanduka . Kana iwe uchifunga pamusoro peizvi mune zvenyama, kwete webhuwo mazwi, zvakafanana nekuve nekadhibhodhi bhokisi iwe uri kuzadza nemashoko ekupakata. Kana iwe ukati bhokisi rinofanira kuva hafu rakazadzwa nemashoko iwayo, kukosha kwekuisa pane iwe unoda kuchasiyana zvichienderana nekukura kwebhokisi. Izvozvowo zvinotsigira zvikamu zvepakati pehutaneti mukugadzira.
Percentage Kubva kune Dzimwe Zvikamu
Mumufananidzo wemufananidzo / mutevedzeri, ndakashandisa pixel maonero ezvo ane chinhu kuti aratidze kuti mufananidzo unoteerera ungaratidze sei. Chaizvoizvo, icho chine chinhu chinogonawo kuiswa kune chikamu uye mufananidzo, kana zvimwe zvikamu, mukati memubhodhoro iwoyo zvingawana maitiro avo zvichienderana nehuwandu hwehuwandu.
Heano mumwe muenzaniso unoratidza izvi mukuita.
Iti iwe une webhusaiti iyo iyo nzvimbo yose iri mukati mekuparadzanisa nekirasi ye "mudziyo" (iyo inowanzo web design practice). Muchikamu ichocho pane zvimwe zvitatu zvikamu zvamuchazopedzisira maitiro ekuratidza semakamuri matatu akaenzana. Iyo HTML inogona kutarisa seyiyi:
Iye zvino, iwe unogona kushandisa CSS kuti uise hukuru hwe "mugove" iwoyo kuti utaure 90%. Mumuenzaniso uyu, kuparadzaniswa kwezvimedu hazvina chimwe chinhu chinopoteredza icho kunze kwomuviri, chatisati tamboisa kune chero zvakakosha. Nokutadza, muviri unozopa se 100% yewindo rekushandura. Nokudaro, chikwata che "chikwata" chikamu chichave chakavakirwa paukuru hwewindo rekushandura. Sezvo firiji iyo yevhenekeri inoshandiswa muhukuru, ndizvo zvichaita ukuru hwe "chikwata" ichi. Saka kana firiji rekushandura riri 2000 pixels yakakura, iri kupatsanurwa kucharatidzira pa 1800 pixels. Izvi zvinotarirwa se 90-muzana ye2000 (2000 x .90 = 1800)), iyo inofanana neshandisi.
Kana imwe neimwe ye "mapoka" mapoka akawanikwa mukati me "mudziyo" yakaiswa kuhukuru hwe30%, mumwe nomumwe wavo achava 540 pixels yakakura mumuenzaniso uyu. Izvi zvinotaridzika se 30% emazana 1800 pixeleri iyo ndiro inoshandiswa pa (1800 x .30 = 540). Kana tikashandura chikamu chechigadziko ichocho, izvi zvikamu zvemukati zvinogonawo kuchinja kuburikidza nehukuru hwavanopa sezvo vari kuvimba pane izvo zvine chinhu.
Ngatimbofungidzira kuti mawindo ekushandura anoramba ari pa2 pixels yakafara, asi tinochinja kuwandisa kwepakati yemubhodhoro kusvika ku80% pane 90%. Izvozvo zvinoreva kuti ichapa pikisipera 1600 yakakura ikozvino (2000 x .80 = 1600). Kunyange kana isu tisingachinji CSS nokuda kwehutatu hwedu "col" mapoka, uye oasiya kwavari pa30%, ivo vachapa zvakasiyana ikozvino sezvo ivo vane chinhu, icho chiri chirevo chavakakosha, chakashanduka. Izvo zvikamu zvitatu zvichange zvichita seipikisi mazana mana egavha imwe neimwe, iyo inenge 30% ye1600, kana hukuru hwegiyo (1600 x .30 = 480).
Kutora izvi zvakatowedzera, kana paiva nemufananidzo mukati meimwe ye "col" mapoka uye iyo chifananidzo chakanga chakakura achishandisa chikamu, chirevo chekuita kwayo chikava "chikwata" chairo. Sezvo iyo "col" divi yakashandura muhukuru, ndizvo zvaizoita mufananidzo mukati mayo. Saka kana uwandu hwekushandura kana "mudziyo" wakashandurwa, izvo zvingakanganisa zvitatu zve "col" mapato, izvo zvingashandura kuenzana kwechifananidzo mukati me "col." Sezvaunogona kuona, izvi zvose zvakabatana kana iyo inouya kumazana ekuenzanisa-anotengesa maitiro.
Paunofunga kuti chinhu chiri mukati mukati pewebhu yepawebhu chinopa hupi kana huwandu hunotengeswa hunoshandiswa paupamhi hwayo, unofanirwa kunzwisisa chirevo chechikamu icho icho icho chinogara chiri papeji peji.
In Summary
Mazana ane chikamu chakakosha pakusika urongwa hwemashoko anotambira . Zvingave iwe uri kuisa mifananidzo yakajeka kana kushandisa mapeji ehupamhi kuti ugadzire girasi remvura yakakwana iyo mazamu ayo akaenzana kune mumwe nomumwe, kunzwisisa izvi zviyero zvichadikanwa pakuzadzisa maonero aunoda.