Zistite, ako webové prehliadače určujú zobrazenie pomocou percentuálnych hodnôt
Mnohí študenti reagujúceho dizajnu webu majú ťažkosti s použitím percentuálnych hodnôt pre hodnoty šírky. Konkrétne dochádza k zámene s tým, ako prehliadač počíta tieto percentá. Nižšie nájdete podrobné vysvetlenie toho, ako percentá pracujú pre výpočet šírky v odpovedajúcej webovej lokalite.
Použitie pixlov pre hodnoty šírky
Keď používate pixely ako šírku, výsledky sú veľmi jednoduché. Ak použijete CSS na nastavenie hodnoty šírky prvku v hlavičke dokumentu na šírku 100 pixelov, bude tento prvok rovnakej veľkosti ako ten, ktorý nastavíte na šírku 100 pixelov v obsahu alebo zápätí stránky alebo iných oblastiach str. Pixely sú absolútnou hodnotou, takže 100 pixelov je 100 pixelov bez ohľadu na to, kde sa vo vašom dokumente objaví prvok. Bohužiaľ, zatiaľ čo hodnoty pixelov sú ľahko zrozumiteľné, nefungujú dobre v citlivých webových stránkach.
Ethan Marcotte vytvoril termín "citlivý web dizajn", ktorý vysvetľuje, že tento prístup obsahuje 3 kľúčové princípy:
- Mriežka kvapalín
- Tekuté médiá
- Mediálne dotazy
Tieto prvé dva body, kvapalinová mriežka a kvapalné médium, sa dosiahnu použitím percentuálnych hodnôt, namiesto pixelov, pre hodnoty veľkosti.
Použitie percentuálnych hodnôt pre hodnoty šírky
Ak použijete percentá na určenie šírky prvku, skutočná veľkosť, na ktorej sa prvok zobrazuje, sa bude líšiť v závislosti od toho, kde sa nachádza v dokumente. Percentá sú relatívnou hodnotou, čo znamená, že zobrazená veľkosť je relatívna k iným prvkom vo vašom dokumente.
Napríklad, ak nastavíte šírku snímky na 50%, neznamená to, že sa obrázok zobrazí na polovicu svojej bežnej veľkosti. Toto je bežná mylná predstava.
Ak je obraz prirodzene široký 600 pixelov, potom pomocou hodnoty CSS na zobrazenie na 50% neznamená, že bude mať vo webovom prehliadači rozlíšenie 300 pixelov. Táto percentuálna hodnota sa vypočítava na základe prvku, ktorý obsahuje daný obrázok, a nie na natívnu veľkosť samotného obrázka. Ak je kontajner (ktorý môže byť rozdelený alebo iný prvok HTML) má šírku 1000 pixelov, potom sa obrázok zobrazí pri 500 pixeloch, pretože táto hodnota je 50% šírky kontajnera. Ak je prvok obsahujúci 400 pixelov široký, obraz sa zobrazí len pri 200 pixeloch, pretože táto hodnota je 50% kontajnera. Dotknutý obrázok má veľkosť 50%, ktorá úplne závisí od prvku, ktorý ho obsahuje.
Nezabudnite, že citlivý dizajn je plynulý. Rozloženia a veľkosti sa zmenia pri zmene veľkosti obrazovky / zariadenia . Ak si o tom myslíte vo fyzickom, inom než webovom termíne, je to, akoby ste mali kartónovú škatuľu, ktorú ste naplnili baliacim materiálom. Ak hovoríte, že políčko by malo byť napoly naplnené týmto materiálom, množstvo balenia, ktoré potrebujete, sa bude líšiť v závislosti od veľkosti balenia. To isté platí pre percentuálnu šírku v webovom dizajne.
Percentá založené na iných percentách
V príklade obrázka / kontajnera som použil hodnoty pixelov pre prvok obsahujúci zobrazenie toho, ako by sa zobrazil citlivý obraz. V skutočnosti by obsahujúci prvok bol tiež nastavený na percentuálny podiel a obraz alebo iné prvky v rámci tohto kontajnera by získali svoje hodnoty na základe percenta percenta.
Tu je ďalší príklad, ktorý to ukazuje v praxi.
Povedz, že máte webovú lokalitu, v ktorej je celý web obsiahnutý v rámci divízie s triedou "kontajnera" (bežná prax webového dizajnu). Vo vnútri tejto divízie sú ďalšie tri divízie, ktoré sa nakoniec štýlu zobrazia ako 3 vertikálne stĺpce. Tento HTML môže vyzerať takto:
Teraz môžete použiť CSS na nastavenie veľkosti tohto oddielu "kontajnera", aby ste uviedli 90%. V tomto príklade divízia kontajnerov nemá iný prvok, ktorý by ho obklopoval iný ako telo, ktoré sme nenastavili na žiadnu konkrétnu hodnotu. V predvolenom nastavení bude telo zobrazené ako 100% okna prehliadača. Preto percento divízie "kontajnera" bude závisieť od veľkosti okna prehliadača. Keď sa toto okno prehliadača zmení vo veľkosti, veľkosť tohto "kontajnera". Takže ak je okno prehliadača široké 2000 pixelov, toto rozdelenie sa zobrazí pri 1800 pixeloch. Toto je vypočítané ako 90% z roku 2000 (2000 x .90 = 1800)), čo je veľkosť prehliadača.
Ak je každá z "col" divízií nachádzajúcich sa v "kontajneri" nastavená na veľkosť 30%, potom každý z nich bude v tomto príklade 540 pixelov. Toto sa vypočíta ako 30% z 1800 pixelov, ktoré kontajner vykresľuje pri (1800 x .30 = 540). Ak by sme zmenili percento tohto kontajnera, tieto vnútorné rozdiely by sa tiež zmenili vo veľkosti, v ktorej sa vykresľujú, pretože sú závislé na tomto prvku obsahujúcom.
Predpokladajme, že okná prehliadača zostávajú v šírke 2000 pixelov, ale zmeníme percentuálnu hodnotu kontajnera na 80% namiesto na 90%. Znamená to, že bude teraz robit 'pri 1600 pixeloch (2000 x .80 = 1600). Dokonca aj vtedy, ak CSS nezmeníme veľkosť našich 3 divízií a ponecháme ich na 30%, budú sa teraz odlišovať, pretože ich obsahujúci element, ktorý je kontextom, ktorého veľkosť má, sa zmenil. Tieto tri divízie teraz budú mať rozmer 480 pixlov, čo je 30% z 1600 alebo veľkosť kontajnera (1600 x .30 = 480).
Ak by to bolo ešte viac, ak by bol obraz vnútri jednej z týchto "col" divízií a tento obraz mal veľkosť v percentách, kontext pre jeho veľkosť by bol samotný "col". Vzhľadom k tomu, že "col" divízia zmenil vo veľkosti, tak by sa obraz vnútri. Takže ak sa zmenila veľkosť prehliadača alebo "kontajnera", to by ovplyvnilo tri rozdelenia "col", čo by zmenilo veľkosť obrazu vo vnútri "col." Ako vidíte, všetky sú spojené, keď ide o percentuálne riadené veľkostné hodnoty.
Keď uvažujete o tom, ako sa element vo vnútri webovej stránky zobrazí pri použití percentuálnej hodnoty pre jeho šírku, musíte pochopiť kontext, v ktorom sa tento prvok nachádza v značkovacej stránke.
V súhrne
Percentá zohrávajú rozhodujúcu úlohu pri vytváraní usporiadania odpovedajúcich webových stránok . Bez ohľadu na to, či ste snímané obrázky citlivo alebo pomocou percentuálnej šírky, aby ste vytvorili skutočne tekutú mriežku, ktorej rozmery sú vzájomne relatívne, pochopenie týchto výpočtov bude potrebné na dosiahnutie požadovaného vzhľadu.