Mnoho študentov responzívneho webdizajnu má ťažkosti s použitím percentuálnych hodnôt pre hodnoty šírky. Konkrétne existuje nejasnosť s tým, ako prehliadač počíta tieto percentá. Ďalej nájdete podrobné vysvetlenie toho, ako fungujú percentá pri výpočtoch šírky na responzívnej webovej stránke.
Používanie pixelov pre hodnoty šírky
Keď použijete pixelov ako hodnota šírky sú výsledky veľmi priame. Ak používate CSS ak chcete nastaviť hodnotu šírky prvku v hlavičke dokumentu na šírku 100 pixelov, bude týmto prvkom hodnota rovnakú veľkosť ako je šírka nastavená na 100 pixelov v obsahu alebo päte webovej stránky alebo v iných oblastiach stránky. Pixely sú absolútna hodnota, takže 100 pixelov je 100 pixelov bez ohľadu na to, kde sa v dokumente prvok nachádza. Aj keď sú hodnoty pixelov ľahko pochopiteľné, bohužiaľ s responzívnymi webovými stránkami nefungujú dobre.
Ethan Marcotte vytvoril tento výraz „Responzívny webový dizajn“, ktorý vysvetľuje tento prístup ako obsahujúci 3 kľúčové princípy:
- Tekutá mriežka
- Kvapalné médiá
- Dotazy na médiá
Tieto prvé dva body, tekutá mriežka a tekuté médiá sa dosiahnu použitím percentuálnych hodnôt namiesto pixelov na nastavenie hodnôt.
Použitie percentuálnych hodnôt pre hodnoty šírky
Keď na určenie šírky prvku použijete percentá, skutočná veľkosť, ktorú prvok zobrazí, sa bude líšiť v závislosti od toho, kde sa v dokumente nachádza. Percentá sú relatívna hodnota, čo znamená, že zobrazená veľkosť je relatívna k ostatným prvkom v dokumente.
Napríklad ak nastavíte šírku znaku obrázok na 50%, to neznamená, že sa obrázok zobrazí v polovici svojej normálnej veľkosti. Toto je častá mylná predstava.
Ak má obrázok v skutočnosti šírku 600 pixelov, potom použitie hodnoty CSS na jeho 50% zobrazenie neznamená, že vo webovom prehliadači bude mať šírku 300 pixelov. Táto percentuálna hodnota sa počíta na základe prvku, ktorý daný obrázok obsahuje, nie na skutočnej veľkosti samotného obrázka. Ak je kontajner (čo môže byť rozdelenie alebo iný element HTML) široký 1 000 pixelov, bude sa obrázok zobrazovať pri 500 pixeloch, pretože táto hodnota je 50% šírky kontajnera. Ak je obsahujúci prvok široký 400 pixelov, bude sa obrázok zobrazovať iba na 200 pixeloch, pretože táto hodnota predstavuje 50% kontajnera. Tu uvedený obrázok má 50% veľkosť, ktorá úplne závisí od prvku, ktorý ho obsahuje.
Pamätajte, že responzívny dizajn je plynulý. Rozloženia a veľkosti sa zmenia ako veľkosť obrazovky / zmeny zariadenia. Ak o tom premýšľate fyzicky, nie webovo, je to ako mať kartónovú škatuľu, ktorú plníte baliacim materiálom. Ak hovoríte, že škatuľa by mala byť z polovice naplnená týmto materiálom, potrebné množstvo balenia sa bude líšiť v závislosti od veľkosti škatule. To isté platí pre percentuálne šírky vo webdizajne.
Percentá založené na iných percentách
V príklade obrázka / kontajnera sme použili hodnoty pixelov pre obsahujúci prvok, aby sme ukázali, ako sa bude zobrazovať responzívny obrázok. V skutočnosti by obsahujúci prvok bol tiež nastavený ako percento a obrázok alebo iné prvky v tomto kontajneri by dostali svoje hodnoty na základe percentuálneho podielu.
Tu je ďalší príklad.
Povedzme, že máte web, ktorý obsahuje celý web v rámci divízie s triedou „kontajner“ (bežný postup pri navrhovaní webových stránok). Vo vnútri tohto oddelenia sú ďalšie tri oddiely, ktoré nakoniec upravíte tak, aby sa zobrazovali ako 3 zvislé stĺpce.
Teraz môžete pomocou CSS nastaviť veľkosť tohto „kontajnerového“ rozdelenia na povedzme 90%. V tomto príklade nemá delenie kontajnerov iný prvok, ktorý ho obklopuje, okrem tela, ktoré sme nenastavili na žiadnu konkrétnu hodnotu. Predvolene sa text vykreslí ako 100% okna prehliadača. Percento divízie „kontajner“ bude preto závisieť od veľkosti okna prehliadača. Keď sa veľkosť okna prehliadača zmení, zmení sa aj veľkosť tohto „kontajnera“. Ak je teda okno prehliadača široké 2 000 pixelov, toto rozdelenie sa zobrazí na 1 800 pixloch. To sa počíta ako 90-percent z roku 2000 (2000 x 0,90 = 1800)), čo je veľkosť prehliadača.
Ak je každá z divízií „col“ nájdených v rámci „kontajnera“ nastavená na veľkosť 30%, potom bude mať v tomto príklade každá z nich šírku 540 pixelov. Vypočíta sa to ako 30% z 1 800 pixlov, ktoré vykresľuje kontajner (1 800 x 0,30 = 540). Keby sme zmenili percento tohto kontajnera, zmenili by sa tieto vnútorné rozdelenia aj vo veľkosti, v akej sa vykresľujú, pretože sú závislé od tohto prvku kontajnera.
Predpokladajme, že okná prehliadača zostanú široké 2 000 pixelov, ale zmeníme percentuálnu hodnotu kontajnera na 80% namiesto 90%. To znamená, že sa teraz vykreslí pri šírke 1 600 pixelov (2 000 x 0,80 = 1 600). Aj keď nezmeníme CSS pre veľkosť našich 3 „col“ divízií a necháme ich na 30%, budú sa teraz vykresľujú odlišne, pretože ich obsahuje prvok, ktorý ich obsahuje, čo je kontext, v ktorom sú zmenšené zmenil. Tieto 3 divízie sa teraz vykreslia ako široké 480 pixelov, čo je 30% z 1 600 alebo veľkosť kontajnera 1 600 x 0,30 = 480).
Keď to vezmeme ešte ďalej, ak by sa v jednej z týchto „stĺpcových“ divízií nachádzal obrázok a veľkosť tohto obrázka sa určovala pomocou percentuálneho podielu, potom by kontext pre jeho veľkosť bol samotný „stĺpec“. Pretože sa toto delenie „col“ zmenilo, zmenil sa aj obraz v ňom. Ak by sa teda zmenila veľkosť prehliadača alebo „kontajnera“, ovplyvnilo by to tri divízie „col“, ktoré by zase zmeniť veľkosť obrázka vo vnútri stĺpca Ako vidíte, všetky sú prepojené, pokiaľ ide o veľkosť riadenú percentom hodnoty.
Keď zoberiete do úvahy, ako sa bude vykresľovať prvok vo vnútri webovej stránky, keď sa na jeho šírku použije percentuálna hodnota, musíte pochopiť kontext, v ktorom sa tento prvok nachádza v značke stránky.
V súhrne
Percentuálne podiely zohrávajú rozhodujúcu úlohu pri vytváraní rozloženia responzívnych webových stránok. Či už prispôsobujete veľkosť obrázkov citlivo, alebo používate percentuálne šírky, aby ste vytvorili skutočne plynulú mriežku, ktorej veľkosti sú vo vzájomnom vzťahu, pochopenie týchto výpočtov bude potrebné na dosiahnutie vášho vzhľadu túžba.