Paljudel tundliku veebidisaini õpilastel on protsentide kasutamine laiuse väärtuste jaoks keeruline. Täpsemalt on segadus sellega, kuidas brauser neid protsente arvutab. Allpool leiate üksikasjaliku selgituse selle kohta, kuidas protsendid laiusearvutuste jaoks töötavad tundlikul veebisaidil.
Pikslite kasutamine laiuse väärtuste jaoks
Kui kasutate pikslit laiuse väärtusena on tulemused väga sirged. Kui kasutate CSS dokumendi päises oleva elemendi laiuse väärtuseks 100 pikslit laieks saab see element sama suur kui see, mille määrate veebisaidi sisus, jaluses või muudes lehe piirkondades 100 piksli laiuseks. Pikslid on absoluutväärtus, seega 100 pikslit on 100 pikslit olenemata sellest, kus teie dokumendis element ilmub. Kahjuks, kuigi piksliväärtusi on lihtne mõista, ei tööta need automaatselt reageerivate veebisaitide puhul.
Ethan Marcotte lõi selle termini „Tundlik veebidisain”, selgitades seda lähenemist kui kolme peamist põhimõtet:
- Vedelikuvõrk
- Vedelik keskkond
- Meediapäringud
Need kaks esimest punkti, vedeliku võre ja vedeliku keskkond saavutatakse väärtuste suuruse määramiseks pikslite asemel protsente.
Protsentide kasutamine laiuse väärtuste jaoks
Kui kasutate elemendi laiuse määramiseks protsente, varieerub elemendi tegelik suurus olenevalt dokumendi asukohast. Protsendid on suhteline väärtus, see tähendab, et kuvatav suurus on võrreldes teie dokumendi muude elementidega.
Näiteks kui määrate tähe laiuse pilt 50% -ni, ei tähenda see, et pilti kuvatakse poole tavalisest suurusest. See on levinud väärarusaam.
Kui pilt on tegelikult 600 pikslit lai, ei tähenda CSS-väärtuse kasutamine selle kuvamiseks 50% -l veel seda, et see oleks veebibrauseris 300 pikslit lai. See protsendiväärtus arvutatakse seda pilti sisaldava elemendi, mitte pildi enda tegeliku suuruse põhjal. Kui konteineri (mis võib olla jagamine või mõni muu HTML-element) laius on 1000 pikslit, kuvatakse pilti 500-pikslise suurusega, kuna see väärtus on 50% konteineri laiusest. Kui sisaldava elemendi laius on 400 pikslit, kuvatakse pilti ainult 200 piksliga, kuna see väärtus on 50% mahutist. Kõnealuse pildi suurus on 50%, mis sõltub täielikult seda sisaldavast elemendist.
Pidage meeles, et tundlik disain on sujuv. Küljendused ja suurused muutuvad ekraani suurus / seade muutub. Kui mõelda sellele füüsilises mõttes, mitte veebis, siis on see justkui pappkarp, mille täidate pakkematerjaliga. Kui ütlete, et kast peaks olema pooleldi selle materjaliga täidetud, varieerub vajaliku pakendi kogus sõltuvalt kasti suurusest. Sama kehtib veebilahenduse protsentlaiuste kohta.
Protsendid muude protsentide põhjal
Pildi / konteineri näites kasutasime sisaldava elemendi piksliväärtusi, et näidata, kuidas tundlik pilt kuvatakse. Tegelikkuses määratakse sisaldav element ka protsendina ja selle konteineri sees olev pilt või muud elemendid saavad oma väärtused protsendiprotsendi põhjal.
Siin on veel üks näide.
Oletame, et teil on veebisait, kus kogu sait on jaotises klassikonteineriga (tavaline veebidisaini tava). Selle jaotuse sees on veel kolm jaotust, mille saate lõpuks kujundada kolme vertikaalse veeruna kuvamiseks.
Nüüd võite CSS-i abil seada selle "konteiner" jaotuse suuruseks 90%. Selles näites ei ole konteinerjaotusel ühtki muud ümbritsevat elementi peale kere, mida me pole määranud mingiks konkreetseks väärtuseks. Vaikimisi renderdatakse keha 100% brauseriaknast. Seetõttu põhineb jaotise „konteiner” protsent brauseriakna suurusel. Kui selle brauseriakna suurus muutub, muutub ka selle "konteineri" suurus. Nii et kui brauseriakna laius on 2000 pikslit, kuvatakse selle jaotuse suuruseks 1800 pikslit. See arvutatakse 90 protsendina 2000-st (2000 x, 90 = 1800)), mis on brauseri suurus.
Kui iga konteineris leiduva „col” jaotuse suurus on seatud 30%, siis on selles näites igaüks neist 540 pikslit lai. See arvutatakse kui 30% 1800 pikslist, mille konteiner renderdab (1800 x, 30 = 540). Kui muudaksime selle konteineri protsenti, muutuksid need sisemised jaotused ka nende suuruses, kuna need sõltuvad sellest konteineri elemendist.
Oletame, et brauseriaknad jäävad 2000 piksli laiuseks, kuid muudame konteineri protsendiväärtuseks 90% asemel 80%. See tähendab, et see renderdatakse praegu 1600 piksli laiusel (2000 x, 80 = 1600). Isegi kui me ei muuda CSS-i oma 3 “col” -jaotise suuruseks ja jätame need 30% -le, muudavad nad renderdatakse nüüd teisiti, kuna nende sisaldav element, mis on kontekst, mille järgi nad on suurusega, on olemas muutunud. Need kolm jaotust renderdatakse nüüd 480 piksli laiusena, mis on 30% 1600-st või mahuti suuruseks 1600 x, 30 = 480).
Võttes seda veelgi kaugemale, kui ühes neist “col” jaotustest oleks pilt ja selle pildi suurus oleks protsentuaalne, oleks selle suuruse määramise kontekst “col” ise. Kui selle “col” jaotuse suurus muutus, muutuks ka selle sees olev pilt. Nii et kui brauseri või „konteineri” suurus muutub, mõjutab see kolme „col” jaotust, mis omakorda muutke “col” sees oleva pildi suurust Nagu näete, on need kõik seotud protsendipõhise suuruse muutmisega väärtused.
Kui kaalute, kuidas veebileht sisaldab elementi, kui selle laiuse protsendiväärtust kasutatakse, peate mõistma konteksti, milles see element lehe märgistuses asub.
Kokkuvõttes
Protsendid mängivad reageerivate veebisaitide kujunduse loomisel kriitilist rolli. Sõltumata sellest, kas suurustate pilte reageerivalt või kasutate protsendilaiuseid, et teha tõeliselt voolav võrk, mille suurused on on üksteise suhtes, on nende arvutuste mõistmine vajalik teie välimuse saavutamiseks soov.