Responzivní web a velikost písma

… a pak to načtete na mobilu – a zjistíte, že se vám slova lámou někde, kde by neměla?

Jak to vyřešit pro mobily všech velikostí?

Většina stavitelných šablon a editorů v sobě má zabudovanou možnost nastavit jednotlivé elementy jinak pro desktop, tablet a mobil. Jako první krok se tedy nabízí přejít na nastavení pro mobil a velikost písma upravit.

Jenže…

Displeje mobilů dnes mají značně rozdílné rozměry. Takže po úpravě zjistíte, že se váš obsah na vašem vlastním mobilu zobrazuje krásně – ale třeba majitelům malých iPhonů mini se pořád někde zalamuje. Nebo se na nich zobrazuje dobře, ale na velkých displejích máte z písmen disproporční “mrňky”, které vůbec nepůsobí zamýšleným velkorysým dojmem.

Kdyby se tak dala velikost písma nastavit tak, aby se dynamicky měnila s velikostí displeje…

Má tohle řešení? Má.

Písmo, jehož velikost se mění podle velikosti displeje

Problém, který už řešil někdo před vámi, má obvykle nějaké řešení. A proto i písmu můžete jednoduše nastavit dynamicky se měnící velikost.

Vlastně – nejen písmu. Ale i dalším prvkům na stránce.

Pixel, procenta, výška řádku – a další jednotky

Pokud weby klikáte v builderech, většinou se u nich sejdete se 3 základními jednotkami. Je tomu tak alespoň u Divi, se kterou pracuji já.

Jaké jednotky to jsou?

Pod zkratkou px najdete pixely, tedy obrazovkové body. V těch se velikost písma udává nejčastěji – a váš první pokus o úpravu velikosti pravděpodobně pracoval právě s nimi.

U nastavení rozměrů jednotlivých elementů, jako je třeba šířka řádku, najdete pixely a procenta.

A u nastavení výšky řádku uvidíte jednotku em.

Existují ale i další jednotky, se kterými kód webu – a tím pádem i vaše šablona či builder, umí pracovat – a které se řídí právě rozměry displeje.

Částečně tak fungují již zmíněná procenta, u kterých ale není vždy stejná odpověď na otázku, z čeho se počítají. Může to být šířka či výška okna, může to být rodičovský element…

Existují ale 2 jednotky, které se vždy počítají z výšky a šířky prohlížeče – a tím pádem se přizpůsobují různým rozměrům displeje.

VW a VH.

V podstatě jsou to taky procenta – 1vw se rovná 1% šířky prohlížeče, 1vh je 1% jeho výšky.

A právě jednotku vw (tedy procenta z šířky prohlížeče) můžeme nejen u písma s úspěchem použít – a udělá přesně to, co potřebujeme. Používat ji můžeme nejen v celých číslech, ale i s desetinným místem (odděleným tečkou – tedy třeba 1.5vw). V nastavení pro mobil nám tedy stačí nalézt hodnotu vw, ve které se problematický element (třeba dlouhé slovo) na stránku pořád ještě vejde – a na všech dalších mobilních telefonech by se měl nejen vejít taky, ale měl by se velikostí přizpůsobit šířce monitoru.

Jednotku vh (tedy procenta z výšky) pro písmo raději nepoužívejte (zobrazení na mnoha zařízeních by vás asi překvapilo), ale rozhodně si ji zapamatujte. Používá se totiž v případech, kdy chcete mít některou sekci webu roztaženou přes celou výšku obrazovky (nebo třeba přesně přes její polovinu). Jednoduše dané sekci nastavíte výšku 100vh  (nebo jinou požadovanou hodnotu) – a máte na 2 kliknutí hotovo. U téhle funkce si dejte pozor na jedinou věc: nepřidávejte ji k vlastnosti height (výška), ale k min-height (minimální výška).. Pokud ji vložíte k height, výška bude vždy přesně na výšku prohlížeče. I za cenu toho, že vám to třeba na mobilu usekne kus obsahu. Min-height tohle řeší, protože případný delší obsah načte tak, jak je potřeba.