Vaadake, kuidas veebibrauserid määravad protsentuaalse väärtusega kuvari
Paljud tundlikud veebidisaini õpilased on raskesti kasutanud protsentides laiuse väärtusi. Täpsemalt on segadust selles, kuidas brauser arvutab need protsendid. Allpool leiate üksikasjaliku selgituse, kuidas protsendid töötavad laiade arvutuste jaoks tundlikul veebisaidil.
Pikslite kasutamine laiuse väärtuste jaoks
Kui kasutate pikslite laiuse väärtust, on tulemused väga lihtsad. Kui kasutate CSS-i, et määrata dokumendi päisesse 100-pikslilise laiusega elemendi laiuse väärtus, on see element sama suur kui veebisaidi sisu või alajaotusega 100 pikslit või muud alad leht Pikslid on absoluutväärtus, seega on 100 pikslit 100 pikslit, olenemata sellest, kus teie dokumendis ilmub element. Kahjuks on pikslite väärtused kergesti arusaadavad, kuid nad ei tööta hästi tundlikel veebisaitidel.
Etan Marcotte lõi mõiste "tundlik veebidisain", selgitades seda lähenemist, mis sisaldab kolme peamist põhimõtet:
- Vedelvõrk
- Vedelkeskkond
- Meediumipäringud
Need kaks esimest punkti, vedeliku võrk ja vedelikkandja, saavutatakse pikslite asemel väärtuste mõõtmiseks protsentides.
Protsentide kasutamine laiuse väärtuste jaoks
Kui kasutate elemendi laiuse määramiseks protsente, siis näete selle elemendi tegeliku suuruse sõltuvalt sellest, kus see dokument asub. Protsendid on suhteline väärtus, mis tähendab, et kuvatav suurus on võrreldes teie dokumendi muude elementidega.
Näiteks, kui määrate pildi laiuse 50% -ni, ei tähenda see, et pilt kuvatakse poole võrra tavalisest suurusest. See on tavaline eksiarvamus.
Kui pilt on laias laos 600 pikslit, siis ei kasuta see CSS-i väärtust 50% näitamiseks, see tähendab, et veebibrauseris on see 300 pikslit. See protsentuaalne väärtus arvutatakse selle pildi sisaldava elemendi, mitte pildi enda nime järgi. Kui konteiner (mis võib olla jagunemine või mõni muu HTML-element) on 1000 pikslit lai, siis kuvatakse pilt 500 pikslit, kuna see väärtus on 50% konteineri laiusest. Kui sisaldav element on 400 pikslit lai, siis kuvatakse pilt ainult 200 pikslit, kuna see väärtus on 50% mahutist. Siin kuvatav pilt on 50% suurune, mis sõltub täielikult selle elemendist, mis seda sisaldab.
Pidage meeles, et reageeriv disain on vedel. Paigutused ja suurused muutuvad ekraani suuruse / seadme muutuste järgi . Kui te arvate seda füüsilises, mitte veebi tingimustes, siis on see nii, et teil oleks pakendimaterjali pakkimisega pappkarp. Kui ütlete, et kastike peaks olema selle materjaliga pool täis, vajab pakendite hulk sõltuvalt kasti suurusest. Sama kehtib veebidisaini laiuse protsendi kohta.
Protsendid, mis põhinevad teistel protsentides
Pildi / konteineri näites kasutasin sisu sisaldava elemendi pikslite väärtusi, et näidata, kuidas reageeriv pilt kuvatakse. Tegelikult seatakse ka elemendi sisaldus protsendina ning selle konteineri pildil või muudel elementidel saadakse nende väärtused protsendina protsendina.
Järgmine näide näitab seda praktikas.
Ütle, et teil on veebisait, kus kogu veebisait on jagatud kontekstiga (ühine veebidisaini tava). Selle jao sees on veel kolm vaheseinet, mida lõpuks stiil kuvada 3 vertikaalses veerus. See HTML võib tunduda nii:
Nüüd võite kasutada CSS-i, et määrata selle "konteineri" jao suurus, et öelda 90%. Antud näites ei sisalda konteineri jagunemisel seda elementi, mis ümbritseb seda muud kui keha, mille kohta me ei ole määranud ühtegi konkreetset väärtust. Vaikimisi kuvatakse keha kui 100% brauseriaknas. Seetõttu on "konteineri" jagamise protsent põhineb brauseri akna suurusel. Kuna see brauseri aken muutub suuruse järgi, muutub see ka selle "konteineri" suuruseks. Nii et kui brauseri aken on 2000 pikslit lai, kuvatakse see jaotus 1800 pikslit. See arvutatakse 90 protsendini 2000-st (2000 x .90 = 1800)), mis on brauseri suurus.
Kui "konteineris" leitud ükskõik milline "kollaste" sektsioonide seadeks on 30% suurune suurus, siis on kõik selles näites 540 pikslit. See arvutatakse 30% -ga 1800 pikslit, mida konteiner muudab (1800 x .30 = 540). Kui me muuta selle konteineri protsentuaalset väärtust, muutuksid ka need siselõigud suurusega, mille nad esitavad, kuna nad sõltuvad sellest, mis sisaldavad elementi.
Oletame, et brauseri aknad jäävad 2000 pikslit laiale, kuid konteineri protsentuaalset väärtust muudetakse 90% asemel 80% -ni. See tähendab, et see muudab nüüd 1600 pikslit (2000 x .80 = 1600). Isegi kui me ei muuda meie 3 "col" jagude suurust CSS-i ja jätame need 30% -ga, muudavad nad nüüd erinevalt, kuna nende sisaldav element, mille kontekstist need on suuruse järgi, on muutunud. Nendest 3 osast on nüüd igaüks 480 pikslit, mis on 30% 1600-st või mahuti suurus (1600 x .30 = 480).
Võttes seda veelgi, kui mõnes neist "kollaste" osadeks oli pilt ja see pilt oli protsentides kasutatud, siis oleks selle suuruse kontekstis tegemist "col" -ga. Kuna see "kolli" jagunemine muutus suuruseks, oleks ka pilt sees. Nii et kui brauseri või "konteineri" suurus muutub, mõjutaks see kolme "col" jaotust, mis omakorda muudaks pildi suurust "kollasena". Nagu näete, on need kõik ühendatud, kui tegemist on protsentuaalsete suuruste väärtustega.
Kui mõelge, kuidas veebi lehe elemendi kujundamisel kasutatakse selle laiusena protsentuaalset väärtust, peate mõistma konteksti, milles see element elab lehe märgistuses.
Kokkuvõttes
Protsendid mängivad olulist rolli tundlike veebisaitide paigutuse loomisel. Ükskõik, kas kasutate pilte vastupidiselt või kasutate protsentuaalseid laiusi, et luua tõeliselt vedelal võrk, mille suurused on üksteise suhtes võrdväärsed, on nende arvutuste mõistmine vajalik soovitud välimuse saavutamiseks.