Lærðu hvernig vefur flettitæki ákvarða skjá með því að nota prósentugildi
Margir nemendur móttækilegur vefhönnun eiga erfitt með að nota prósentur fyrir breiddargildi. Sérstaklega er rugl á því hvernig vafrinn reiknar þá prósentu. Hér fyrir neðan finnur þú ítarlega skýringu á því hvernig prósentur vinna fyrir útreikninga á breidd í móttækilegri vefsíðu.
Notkun pixla fyrir breiddarmörk
Þegar þú notar pixla sem breiddargildi eru niðurstöðurnar mjög einfaldar. Ef þú notar CSS til að stilla breiddarverð þáttar í hausnum í skjali í 100 punkta breitt, þá mun þessi þáttur vera sá sami stærð sem einn sem þú stillir á 100 pixlar á breidd í innihaldi vefsvæðis eða fótspor eða öðrum sviðum síðu. Punktar eru alger gildi, þannig að 100 punkta er 100 punktar, sama hvar í skjalinu þínu er þáttur. Því miður, en pixel gildi eru auðvelt að skilja, virka þær ekki vel á móttækilegum vefsíðum.
Ethan Marcotte hugsaði hugtakið "móttækilegur vefur hönnun" og útskýrði þessa aðferð sem inniheldur 3 lykilmenn:
- Vökvakerfi
- Vökvamiðlar
- Media fyrirspurnir
Þessir fyrstu tveir stig, vökvakerfi og vökvamiðlar, er náð með því að nota prósentur, í stað punkta, fyrir límvatn.
Notkun prósentu fyrir breiddarmörk
Þegar þú notar hundraðshluta til að búa til breidd fyrir frumefni mun raunveruleg stærð þessarar atriða vera breytileg eftir því hvar hún er í skjalinu. Hlutfall er hlutfallsleg gildi, sem þýðir að stærðin sem birtist er miðað við aðra þætti í skjalinu þínu.
Til dæmis, ef þú stillir breidd myndar í 50%, þýðir það ekki að myndin birtist í helmingi eðlilegs stærð. Þetta er algeng misskilningur.
Ef mynd er innfædd 600 pixlar á breidd, þá þýðir það ekki að það sé 300 pixlar á breidd í vafranum með því að nota CSS gildi til að sýna það á 50%. Þetta prósentuvirði er reiknað út frá frumefni sem inniheldur þessi mynd, ekki innfædd stærð myndarinnar sjálfu. Ef ílátið (sem gæti verið deild eða einhver önnur HTML frumefni) er 1000 pixlar á breidd, þá birtist myndin í 500 punktum þar sem þessi gildi er 50% af breidd ílátsins. Ef innihaldsefnið er 400 punkta breitt, þá birtist myndin aðeins í 200 punkta, þar sem það gildi er 50% af ílátinu. Myndin sem um ræðir hér hefur 50% stærð sem fer algjörlega eftir frumefni sem inniheldur það.
Mundu að móttækileg hönnun er vökvi. Skipulag og stærðir munu breytast þegar skjástærðin / tækið breytist . Ef þú hugsar um þetta á líkamlegum, ekki vefhugtökum, það er eins og að hafa pappa kassa sem þú ert að fylla með pökkunarefni. Ef þú segir að kassinn ætti að vera hálf fullur af því efni, þá þarf magn pakkninganna að vera breytilegt eftir stærð kassans. Sama gildir um hundraðshluta breiddar í vefhönnun.
Hlutfall byggt á öðrum hlutföllum
Í dæmi / ímynd dæmi notaði ég pixla gildi fyrir innihaldsefnið til að sýna hvernig móttækileg mynd myndi birtast. Í raunveruleikanum myndi einnig innihalda innihaldsefnið að prósentu og myndin eða aðrir þættir innan þessara gáma myndu fá gildi þeirra miðað við hundraðshluta prósentu.
Hér er annað dæmi sem sýnir þetta í reynd.
Segðu að þú hafir vefsíðu þar sem allt vefsvæði er að finna innan deildar með flokki "gámur" (sameiginlegt vefhönnun). Inni þessi deild eru þrjár aðrar deildir sem þú verður að lokum stíll til að sýna sem 3 lóðréttar dálkar. Þessi HTML kann að líta svona út:
Nú getur þú notað CSS til að stilla stærð þessarar "ílát" deild til að segja 90%. Í þessu dæmi hefur ílátarsviðið ekki aðra þætti sem umlykur það annað en líkamann, sem við höfum ekki sett á neina sérstaka gildi. Sjálfgefin mun líkaminn gera eins og 100% af vafranum. Því mun hlutfallið "ílát" deildarinnar byggjast á stærð vafraglugganum. Eins og þessi gluggi breytist í stærð, þá mun stærð þessarar "gáma". Svo ef vafrinn er 2000 pixlar á breidd, mun þessi deild sýna á 1800 punktum. Þetta er reiknað sem 90 prósent af 2000 (2000 x .90 = 1800)), sem er stærð vafrans.
Ef hver og einn af "col" deildunum sem finnast í "ílátinu" eru stillt í 30% þá mun hver þeirra vera 540 punktar á breidd í þessu dæmi. Þetta er reiknað sem 30% af 1800 punkta sem ílátið gengur á (1800 x .30 = 540). Ef við breyttum hundraðshluta þessara íláta myndu þessar innri deildir einnig breytast í þeirri stærð sem þeir gera við þar sem þau eru háð því að innihalda frumefni.
Við skulum gera ráð fyrir að gluggarnir í vafranum sé áfram á 2000 punktum á breidd en við breytum prósentuvirði ílátsins í 80% í stað 90%. Það þýðir að það mun vera 1600 punktar breiður núna (2000 x .80 = 1600). Jafnvel þótt við breytum ekki CSS fyrir stærð 3-deiliskipa okkar og skilur þau 30% þá munum við gera það öðruvísi núna þar sem innihaldsefnið þeirra, sem er samhengið sem þau eru stór, hefur breyst. Þessir 3 deildir munu nú vera eins og 480 pixlar á breidd, hver er 30% af 1600, eða stærð ílátsins (1600 x .30 = 480).
Taka þetta enn frekar, ef myndin var í einum af þessum "kol" deildum og þessi mynd var stór með því að nota prósentu, þá væri samhengið fyrir límun sína "kolið" sjálft. Eins og þessi "kol" deild breyst í stærð, þá myndi myndin inni í henni. Svo ef stærð vafrans eða "ílátsins" breyst, myndi það hafa áhrif á þrjá "col" deildina, sem myndi síðan breyta stærð myndarinnar inni í "col." Eins og þú sérð eru þetta öll tengd þegar það kemur að prósentu-ekin límvatn gildi.
Þegar þú skoðar hvernig þáttur inni á vefsíðu muni koma fram þegar prósentuvirði er notað fyrir breidd þess, þá þarftu að skilja samhengið þar sem þessi þáttur er búsettur á síðunni.
Í stuttu máli
Hlutfall gegna mikilvægu hlutverki við að búa til skipulag fyrir móttækileg vefsvæði . Hvort sem þú ert að límta myndirnar með skilvirkum hætti eða nota hundraðshluta til að búa til raunverulegt vökvakerfi sem eru stærðir miðað við hvert annað, verður skilningur þessara útreikninga nauðsynleg til að ná því útlit sem þú vilt.