Zjistěte, jak webové prohlížeče určují zobrazení pomocí procentních hodnot
Mnoho studentů respondentního webového designu má obtížné použití procentních hodnot pro hodnoty šířky. Konkrétně existuje zmatek s tím, jak prohlížeč vypočítává tato procenta. Níže najdete podrobné vysvětlení, jak procenty pracují pro výpočet šířky v citlivém webu.
Použití pixelů pro hodnoty šířky
Při použití pixelů jako hodnoty šířky jsou výsledky velmi jednoduché. Pokud použijete CSS pro nastavení hodnoty šířky prvku v záhlaví dokumentu na šířku 100 pixelů, bude tento prvek stejný jako ten, který nastavíte na šířku 100 pixelů v obsahu nebo zápatí webu nebo v jiných oblastech strana. Pixely jsou absolutní hodnotou, takže 100 pixelů je 100 pixelů bez ohledu na to, kde se ve vašem dokumentu objeví prvek. Bohužel, zatímco hodnoty pixelů jsou snadno pochopitelné, nefungují dobře na citlivých webových stránkách.
Ethan Marcotte vytvořil výraz "citlivý web design", který vysvětluje, že tento přístup obsahuje 3 klíčové principy:
- Tekutá mřížka
- Kapalná média
- Dotazy týkající se médií
Tyto první dva body, tekutá mřížka a tekuté média jsou dosaženy použitím procent, namísto pixelů, pro dimenzování hodnot.
Použití procent pro hodnoty šířky
Když použijete procentuální hodnoty pro určení šířky prvku, skutečná velikost, na které se element zobrazí, se bude lišit v závislosti na tom, kde se nachází v dokumentu. Procenta jsou relativní hodnotou, což znamená, že zobrazená velikost je relativní vzhledem k ostatním prvkům vašeho dokumentu.
Pokud například nastavíte šířku obrázku na 50%, neznamená to , že se obraz zobrazí na polovině své normální velikosti. To je běžná mylná představa.
Je-li obraz natívně šířky 600 pixelů, pak pomocí hodnoty CSS, aby se zobrazil na 50%, neznamená, že bude ve webovém prohlížeči šířka 300 pixelů. Tato procentuální hodnota je vypočtena na základě prvku, který obsahuje tento obrázek, nikoliv nativní velikost samotného obrazu. Pokud je kontejner (který může být dělením nebo jiným prvkem HTML) o šířce 1000 pixelů, zobrazí se obraz 500 pixelů, protože tato hodnota je 50% šířky kontejneru. Je-li obsahový prvek široký 400 pixelů, obraz se zobrazí pouze u 200 pixelů, protože tato hodnota je 50% kontejneru. Dotazovaný obrázek má 50% velikost, která zcela závisí na prvku, který ho obsahuje.
Nezapomeňte, že citlivý design je plynulý. Rozvržení a velikosti se změní při změně velikosti / zařízení . Pokud o tom přemýšlíte ve fyzických, non-webových termínech, je to jako mít kartonovou krabici, kterou naplníte obalovým materiálem. Pokud říkáte, že krabice by měla být napůl naplněna tímto materiálem, množství balení, které potřebujete, se bude lišit v závislosti na velikosti krabice. Totéž platí pro procento šířky v návrhu webových stránek.
Procenta založená na jiných procentních podílech
V příkladu obrázku / kontejneru jsem použil hodnoty pixelů pro obsahový prvek, aby ukázal, jak se bude zobrazovat citlivý obraz. Ve skutečnosti by obsahující prvek byl také nastaven na procentní hodnotu a obraz nebo jiné prvky uvnitř tohoto kontejneru by získaly své hodnoty na základě procentního podílu.
Zde je další příklad, který to ukazuje v praxi.
Řekněme, že máte webovou stránku, kde je celý web obsažen v rámci divize s třídou "kontejneru" (běžná praxe webového designu). Uvnitř této divize jsou tři další divize, které nakonec budete stylovat, aby se zobrazily jako 3 vertikální sloupce. Ten HTML může vypadat takto:
Nyní můžete použít CSS pro nastavení velikosti tohoto oddílu "kontejneru", aby bylo uvedeno 90%. V tomto příkladu divize kontejnerů nemá jiný prvek, který jej obklopuje jiný než tělo, které jsme nenastavili žádnou konkrétní hodnotu. Ve výchozím nastavení bude tělo zobrazeno jako 100% okna prohlížeče. Proto procentní podíl "kontejneru" bude vycházet z velikosti okna prohlížeče. Vzhledem k tomu, že se toto okno prohlížeče mění ve velikosti, tak bude velikost tohoto "kontejneru". Takže pokud je okno prohlížeče o šířce 2000 pixelů, bude toto rozdělení zobrazeno na 1800 pixelech. To se vypočítá jako 90% z roku 2000 (2000 x .90 = 1800)), což je velikost prohlížeče.
Pokud je každá z částí "col" nacházejících se v "kontejneru" nastavena na velikost 30%, pak každý z nich bude v tomto příkladu 540 pixelů. To se vypočítá jako 30% z 1800 pixelů, které kontejner vykreslí na (1800 x .30 = 540). Pokud bychom změnili procento tohoto kontejneru, tyto vnitřní rozdíly by se také změnily ve velikosti, kterou vykreslují, protože jsou závislé na uvedeném prvku.
Předpokládejme, že okna prohlížeče zůstávají na šířce 2000 pixelů, ale změníme procentuální hodnotu kontejneru na 80% namísto 90%. To znamená, že to bude mít nyní 1600 pixelů (2000 x .80 = 1600). Dokonce i kdybychom nezměnili CSS pro velikost našich 3 "col" divizí, a nechat je na 30%, oni budou vykreslovat jinak, protože jejich obsahovat element, který je kontext, který je rozměry, se změnil. Tyto tři divize nyní budou mít šířku 480 pixelů, což je 30% z 1600, nebo velikost kontejneru (1600 x .30 = 480).
Pokud by to bylo ještě daleko, jestliže by byl obraz uvnitř jedné z těchto "col" divizí a tento obraz byl dimenzován pomocí procenta, kontext pro jeho velikost by byl samotný "col". Vzhledem k tomu, že se rozdělení "col" změnilo ve velikosti, tak by se i uvnitř obrazu objevil. Takže pokud se změní velikost prohlížeče nebo "kontejneru", to by ovlivnilo tři rozdělení "col", což by zase změnilo velikost obrázku uvnitř "col". Jak vidíte, jsou všechny připojeny, když přichází k hodnotám určeným pro procento.
Když zvážíte, jak se bude element uvnitř webové stránky vykreslovat, když se použije procentní hodnota pro její šířku, musíte pochopit kontext, ve kterém se tento prvek nachází v označení stránky.
Celkem
Procenta hrají klíčovou roli při vytváření rozvržení pro citlivé webové stránky . Ať už se jedná o dimenzování snímků citlivě, nebo pomocí procentuálních šířky, abyste vytvořili skutečně tekutou mřížku, jejíž rozměry jsou relativní, pochopení těchto výpočtů bude nezbytné k dosažení požadovaného vzhledu.