Mnoho studentů responzivního webového designu má potíže s použitím procent pro hodnoty šířky. Konkrétně existuje zmatek s tím, jak prohlížeč vypočítává tato procenta. Níže naleznete podrobné vysvětlení toho, jak fungují procenta pro výpočty šířky na responzivním webu.
Použití pixelů pro hodnoty šířky
Když používáte pixelů jako hodnota šířky jsou výsledky velmi přímé. Pokud používáte CSS pro nastavení hodnoty šířky prvku v záhlaví dokumentu na šířku 100 pixelů bude tímto prvkem stejnou velikost jako velikost, kterou jste nastavili na 100 pixelů na šířku v obsahu nebo zápatí webu nebo v jiných oblastech stránky. Pixely jsou absolutní hodnota, takže 100 pixelů je 100 pixelů bez ohledu na to, kde se v dokumentu prvek objeví. Bohužel, i když jsou hodnoty pixelů snadno srozumitelné, s responzivními webovými stránkami nefungují dobře.
Ethan Marcotte vytvořil termín „Responzivní webový design“, vysvětlující tento přístup jako obsahující 3 klíčové principy:
- Tekutá mřížka
- Tekutá média
- Dotazy na média
Těchto prvních dvou bodů, tekuté mřížky a tekutého média, je dosaženo použitím procent namísto pixelů pro změnu hodnot.
Použití procent pro hodnoty šířky
Když k určení šířky prvku použijete procenta, skutečná velikost, kterou prvek zobrazí, se bude lišit v závislosti na tom, kde se v dokumentu nachází. Procenta jsou relativní hodnota, což znamená, že zobrazená velikost je relativní k ostatním prvkům v dokumentu.
Například pokud nastavíte šířku znaku obraz na 50%, to neznamená, že se obrázek zobrazí v polovině své normální velikosti. Toto je běžná mylná představa.
Pokud je obrázek ve skutečnosti široký 600 pixelů, pak použití hodnoty CSS k jeho zobrazení na 50% neznamená, že ve webovém prohlížeči bude široký 300 pixelů. Tato procentuální hodnota se počítá na základě prvku, který daný obrázek obsahuje, nikoli na skutečné velikosti samotného obrázku. Pokud je kontejner (což může být divize nebo jiný prvek HTML) široký 1 000 pixelů, pak se obrázek zobrazí na 500 pixelech, protože tato hodnota je 50% šířky kontejneru. Pokud je prvek obsahující šířku 400 pixelů, bude se obrázek zobrazovat pouze na 200 pixelech, protože tato hodnota je 50% kontejneru. Dotyčný obrázek zde má 50% velikost, která zcela závisí na prvku, který jej obsahuje.
Pamatujte, že responzivní design je plynulý. Rozvržení a velikosti se budou měnit jako velikost obrazovky / změny zařízení. Pokud o tom přemýšlíte fyzicky, nikoli webově, je to jako mít kartonovou krabici, kterou plníte balicím materiálem. Pokud řeknete, že krabička by měla být do poloviny naplněna tímto materiálem, bude se množství potřebného balení lišit v závislosti na velikosti krabičky. Totéž platí pro procentní šířky ve webovém designu.
Procenta na základě jiných procent
V příkladu obrázek / kontejner jsme použili hodnoty pixelů pro prvek, který obsahuje, aby se ukázalo, jak se bude zobrazovat responzivní obrázek. Ve skutečnosti by obsahující prvek byl také nastaven jako procento a obrázek nebo jiné prvky uvnitř tohoto kontejneru by získaly své hodnoty na základě procentního podílu.
Zde je další příklad.
Řekněme, že máte web, na kterém je celý web obsažen v divizi s třídou „kontejner“ (běžná praxe v oblasti webdesignu). Uvnitř tohoto rozdělení jsou tři další oddíly, které nakonec upravíte tak, aby se zobrazovaly jako 3 svislé sloupce.
Nyní můžete pomocí CSS nastavit velikost tohoto „kontejnerového“ rozdělení na 90%. V tomto příkladu nemá dělení kontejnerů jiný prvek, který jej obklopuje, než tělo, které jsme nenastavili na žádnou konkrétní hodnotu. Ve výchozím nastavení se tělo vykreslí jako 100% okna prohlížeče. Proto bude procento divize „kontejner“ vycházet z velikosti okna prohlížeče. Jak se velikost okna prohlížeče mění, mění se i velikost tohoto „kontejneru“. Pokud je tedy okno prohlížeče široké 2 000 pixelů, toto rozdělení se zobrazí na 1 800 pixelech. To se počítá jako 90 procent z roku 2000 (2000 x 0,90 = 1800)), což je velikost prohlížeče.
Pokud je každá z divizí „col“ nalezených v „kontejneru“ nastavena na velikost 30%, bude mít v tomto příkladu každá z nich šířku 540 pixelů. To se počítá jako 30% z 1 800 pixelů, které kontejner vykreslí (1 800 x 0,30 = 540). Pokud bychom změnili procento tohoto kontejneru, tyto vnitřní divize by se také změnily ve velikosti, ve které se vykreslují, protože jsou závislé na prvku kontejneru.
Předpokládejme, že okna prohlížeče zůstanou široká 2 000 pixelů, ale změníme procentuální hodnotu kontejneru na 80% namísto 90%. To znamená, že se nyní bude vykreslovat v šířce 1600 pixelů (2000 x 0,80 = 1600). I když nezměníme CSS pro velikost našich 3 „col“ divizí a necháme je na 30%, budou vykreslují se nyní jinak, protože jejich obsahový prvek, což je kontext, podle kterého jsou dimenzovány, má změněno. Tyto 3 divize se nyní vykreslí jako široká 480 pixelů, což je 30% z 1600, nebo velikost kontejneru 1600 x 0,30 = 480).
Když to vezmeme ještě dále, pokud by v jedné z těchto „col“ divizí byl obraz a ten by byl dimenzován pomocí procenta, kontext pro jeho dimenzování by byl „samotný“. Vzhledem k tomu, že se toto rozdělení „col“ změnilo, změnil se i obraz uvnitř. Pokud by se tedy změnila velikost prohlížeče nebo „kontejneru“, ovlivnilo by to tři divize „col“, což by zase změnit velikost obrázku uvnitř sloupce Jak vidíte, všechny jsou spojeny, pokud jde o velikostně řízené dimenzování hodnoty.
Když vezmete v úvahu, jak se prvek uvnitř webové stránky vykreslí, když se pro jeho šířku použije procentní hodnota, musíte pochopit kontext, ve kterém se daný prvek nachází ve značce stránky.
Celkem
Procenta hrají zásadní roli při vytváření rozložení pro responzivní weby. Ať už reagujete na velikost obrázků nebo používáte procentní šířky, abyste vytvořili skutečně plynulý rastr, jehož velikosti jsou navzájem relativní, porozumění těmto výpočtům bude nutné k dosažení vzhledu, který máte touha.