Dysgwch sut mae porwyr gwe yn pennu arddangosfa gan ddefnyddio gwerthoedd canran
Mae gan lawer o fyfyrwyr dylunio gwefannau ymatebol amser anodd gan ddefnyddio canrannau ar gyfer gwerthoedd lled. Yn benodol, mae yna ddryswch gyda sut mae'r porwr yn cyfrifo'r canrannau hynny. Isod fe welwch esboniad manwl o sut y mae canrannau'n gweithio ar gyfer cyfrifiadau lled mewn gwefan ymatebol.
Defnyddio Pixeli ar gyfer Gwerthoedd Ehangach
Pan fyddwch chi'n defnyddio picsel fel gwerth lled, mae'r canlyniadau'n syml iawn. Os ydych chi'n defnyddio CSS i osod gwerth lled elfen ym mhennod dogfen i 100 picsel o led, bydd yr elfen honno yr un maint ag un y byddwch yn gosod i 100 picsel o led yng nghynnwys y wefan neu'r troedfedd neu feysydd eraill y tudalen. Mae piceli yn werth absoliwt, felly mae 100 picsel yn 100 picsel, ble bynnag y mae elfen yn ymddangos yn eich dogfen. Yn anffodus, er bod gwerthoedd picsel yn hawdd eu deall, nid ydynt yn gweithio'n dda mewn gwefannau ymatebol.
Arweiniodd Ethan Marcotte y term "dylunio gwefannau ymatebol", gan egluro'r dull hwn fel bod 3 prif bennaeth:
- Grid hylif
- Cyfryngau hylif
- Ymholiadau'r cyfryngau
Cyflawnir y ddau bwynt cyntaf hynny, grid hylif a chyfryngau hylif trwy ddefnyddio canrannau, yn hytrach na picseli, ar gyfer sizing gwerthoedd.
Gan ddefnyddio Canrannau ar gyfer Gwerthoedd Ehangach
Pan fyddwch chi'n defnyddio canrannau i sefydlu lled ar gyfer elfen, bydd y maint gwirioneddol y bydd yr elfen yn ei arddangos yn amrywio gan ddibynnu ar ble mae yn y ddogfen. Mae'r canrannau yn werth cymharol, sy'n golygu bod y maint a ddangosir yn gymharol ag elfennau eraill yn eich dogfen.
Er enghraifft, os ydych chi'n gosod lled delwedd i 50%, nid yw hyn yn golygu y bydd y ddelwedd yn arddangos ar hanner ei faint arferol. Mae hyn yn gamddealltwriaeth cyffredin.
Os yw delwedd yn geni 600 picsel o led, yna nid yw defnyddio gwerth CSS i'w arddangos yn 50% yn golygu y bydd yn 300 picsel o led yn y porwr gwe. Cyfrifir y gwerth canran hwn yn seiliedig ar yr elfen sy'n cynnwys y ddelwedd honno, nid maint brodorol y ddelwedd ei hun. Os yw'r cynhwysydd (a allai fod yn rhaniad neu ryw elfen HTML arall) yn 1000 picsel o led, bydd y ddelwedd yn cael ei arddangos yn 500 picsel gan fod y gwerth hwnnw'n 50% o led y cynhwysydd. Os yw'r elfen sy'n cynnwys 400 picsel o led, yna dim ond yn 200 picsel y bydd y ddelwedd yn dangos, gan fod y gwerth hwnnw'n 50% o'r cynhwysydd. Mae gan y ddelwedd dan sylw faint o 50% sy'n dibynnu'n llwyr ar yr elfen sy'n ei gynnwys.
Cofiwch, mae dyluniad ymatebol yn hylif. Bydd cynlluniau a meintiau'n newid wrth i faint / dyfais y sgrin newid . Os ydych chi'n meddwl am hyn mewn termau corfforol, di-we, mae'n debyg i gael bocs cardbord yr ydych chi'n ei lenwi â deunydd pacio. Os ydych chi'n dweud y dylai'r blwch gael ei llenwi'n llawn â'r deunydd hwnnw, bydd swm y pacio y bydd ei angen arnoch yn amrywio yn dibynnu ar faint y blwch. Mae'r un peth yn wir am led canran mewn dylunio gwe.
Canrannau yn seiliedig ar Ganrannau Eraill
Yn yr enghraifft delwedd / cynhwysydd, defnyddiais werthoedd picsel ar gyfer yr elfen sy'n cynnwys i ddangos sut y byddai'r ddelwedd ymatebol yn arddangos. Mewn gwirionedd, byddai'r elfen sy'n cynnwys hefyd yn cael ei osod i ganran a byddai'r ddelwedd, neu elfennau eraill, y tu mewn i'r cynhwysydd hwnnw yn cael eu gwerthoedd yn seiliedig ar ganran o ganran.
Dyma enghraifft arall sy'n dangos hyn yn ymarferol.
Dywedwch fod gennych wefan lle mae'r safle cyfan wedi'i gynnwys mewn adran gyda dosbarth o "gynhwysydd" (arfer dylunio gwe gyffredin). Y tu mewn i'r adran honno mae tair adran arall y byddwch yn arddull i'w harddangos yn y pen draw fel 3 colofn fertigol. Efallai y bydd HTML yn edrych fel hyn:
Nawr, gallwch ddefnyddio CSS i osod maint yr adran "cynhwysydd" hwnnw i ddweud 90%. Yn yr enghraifft hon, nid oes gan yr adran gynhwysydd elfen arall sy'n ei amgylchynu heblaw'r corff, ac nid ydym wedi gosod unrhyw werth penodol. Yn ddiofyn, bydd y corff yn rendro fel 100% o ffenestr y porwr. Felly, bydd canran yr adran "cynhwysydd" yn seiliedig ar faint ffenestr y porwr. Gan fod y ffenestr porwr hwnnw'n newid maint, felly bydd maint y "cynhwysydd" hwn. Felly, os yw'r ffenestr porwr yn 2000 picsel o led, bydd yr adran hon yn arddangos yn 1800 picsel. Cyfrifir hyn fel 90 y cant o 2000 (2000 x .90 = 1800), sef maint y porwr.
Os yw pob un o'r rhanbarthau "col" a geir o fewn y "cynhwysydd" wedi'u gosod i faint o 30%, yna bydd pob un ohonynt yn 540 picsel o led yn yr enghraifft hon. Cyfrifir hyn fel 30% o'r 1800 picsel y mae'r cynhwysydd yn ei rendro yn (1800 x .30 = 540). Pe baem ni wedi newid canran y cynhwysydd hwnnw, byddai'r rhanbarthau mewnol hyn hefyd yn newid yn y maint y maent yn ei wneud oherwydd eu bod yn dibynnu ar yr elfen honno.
Gadewch i ni dybio bod ffenestri'r porwr yn parhau i fod yn 2000 picsel o led, ond rydym yn newid gwerth canran y cynhwysydd i 80% yn hytrach na 90%. Mae hynny'n golygu y bydd yn rendro yn 1600 picsel ar led yn awr (2000 x .80 = 1600). Hyd yn oed os na fyddwn yn newid yr CSS ar gyfer maint ein rhanbarthau 3 "col", ac yn eu gadael ar 30%, byddant yn gwneud hyn yn wahanol erbyn hyn ers i'r elfen sy'n cynnwys, y cyd-destun y maen nhw eu maint, wedi newid. Bydd y 3 rhanbarth honno bellach yn gwneud 480 picsel o led yr un, sef 30% o 1600, neu faint y cynhwysydd (1600 x .30 = 480).
Gan gymryd hyn hyd yn oed ymhellach, pe bai delwedd y tu mewn i un o'r is-adrannau "col" hyn ac roedd y ddelwedd honno'n fawr gan ddefnyddio canran, y cyd-destun ar gyfer ei sizing fyddai'r "col" ei hun. Gan fod yr adran "col" honno wedi newid mewn maint, felly byddai'r ddelwedd y tu mewn iddo. Felly, os yw maint y porwr neu'r "cynhwysydd" wedi newid, byddai hynny'n effeithio ar y tair adran "col", a fyddai yn ei dro yn newid maint y ddelwedd y tu mewn i'r "col." Fel y gwelwch, mae'r rhain i gyd yn gysylltiedig â mae'n dod â gwerthoedd sizing sy'n cael eu gyrru gan ganran.
Pan fyddwch chi'n ystyried sut y bydd elfen y tu mewn i dudalen we yn ei rendro pan ddefnyddir gwerth canranol ar gyfer ei led, bydd angen i chi ddeall y cyd-destun y mae'r elfen honno yn byw yn marcio'r dudalen.
Yn Crynodeb
Mae canrannau'n chwarae rhan hanfodol wrth greu'r cynllun ar gyfer gwefannau ymatebol . P'un a ydych chi'n sizing delweddau yn ymatebol neu'n defnyddio lled canran i wneud grid wirioneddol hylif y mae ei feintiau yn gymharol â'i gilydd, bydd angen deall y cyfrifiadau hyn er mwyn cyflawni'r edrychiad rydych chi ei eisiau.