Pojem rem (z angl. "root em") se neustále vyskytuje ve vývoji webu, zejména v kontextu nastavení velikostí písem a prvků. Je to absolutní měrná jednotka, která je založena na velikosti písma kořenového prvku.
V CSS je rem pohodlnou alternativou k pixelům a procentům, protože umožňuje flexibilnější a přizpůsobivější design. Pomocí rem lze snadno měnit rozměry prvků na základě velikosti obrazovky uživatele, což platí zejména v době mobilních zařízení.
Chcete-li vytvořit rem, musíte nastavit velikost písma kořenového prvku v jiných měrných jednotkách než rem. K určení velikosti písma lze například použít pixely (px) nebo procenta (%). Poté již zbývá pouze vypočítat hodnoty v rem pomocí vzorce: hodnota v pixelech / velikost písma kořenového prvku.
Použití rem umožňuje vytvářet adaptivní webové stránky, které lze snadno škálovat na různých zařízeních. Kromě toho tento přístup poskytuje pohodlí při doprovázení a změně designu, protože všechny velikosti prvků odkazují na jedinou hodnotu – velikost písma kořenového prvku.
Kroky budování rem
K vytvoření adaptivních webových stránek a zjednodušení práce s měrnými jednotkami, jako jsou pixely, lze použít relativní jednotku rem. V této části se podíváme na hlavní kroky, které je třeba provést pro stavbu rem.
- Určete základní velikost písma (base font size). Doporučená hodnota pro základní velikost písma je 16 pixelů.
- Pomocí základní velikosti písma určete hodnotu pro rem. To lze provést jednoduchým výpočtem: jeden rem odpovídá základní velikosti písma. Pokud je například základní velikost písma 16 pixelů, pak 1 rem odpovídá 16 pixelům.
- Použijte rem k zadání velikosti písma, šířky, odsazení a dalších vlastností prvků na webové stránce. Místo použití Pixelů použijte hodnotu v rem. Chcete-li například nastavit velikost písma 14 pixelů, můžete použít hodnotu 0.875 rem (14 pixelů/16 pixelů).
- V případě potřeby můžete použít požadavky na média ke změně základní velikosti písma a podle toho všech velikostí zadaných v rem. Například pro zvýšení základní velikosti písma na mobilních zařízeních můžete použít požadavky na média s podmínkou max-width.
- Otestujte webovou stránku na různých zařízeních a v různých prohlížečích, abyste se ujistili, že používání rem vede k požadovaným výsledkům. V případě potřeby proveďte úpravy hodnot rem, abyste dosáhli optimálního zobrazení na všech zařízeních.
Podle těchto kroků budete moci vytvořit webové stránky, které se snadno přizpůsobí různým obrazovkám a umožní vám snadno měnit velikosti prvků pomocí relativní jednotky rem.
Určení velikosti písma
Jedním ze způsobů, jak nastavit velikost písma v jednotkách rem. Tato měrná jednotka písma je založena na velikosti písma prvku root (uzel), které je ve výchozím nastavení 16 pixelů. Nastavením velikosti písma v rem jej tedy definujeme vzhledem k základní velikosti, což umožňuje flexibilnější a přizpůsobivější design.
Chcete-li určit velikost písma v rem, musíte postupovat podle následujících kroků:
- Určete základní velikost písma (například 16px) nastavením v jednotkách px pro prvek root (obvykle toto ).
- Určete požadovanou velikost písma v rem pomocí vzorce:
Velikost písma v rem = (požadovaná velikost písma v pixelech) / (základní velikost písma v pixelech)
Například při základní velikosti písma v 16px, pokud chceme nastavit velikost písma 20px, pak:
Velikost písma v rem = 20px / 16px = 1.25 rem
Po určení velikosti písma v rem jej lze použít na požadované prvky zadáním hodnoty velikosti písma s jednotkami rem v CSS:
Pokud se tedy změní základní velikost písma, všechny velikosti písem zadané v rem budou automaticky úměrně škálovány, což vám umožní vytvořit adaptivní design, aniž byste museli ručně měnit každou velikost písma.
Převod px na rem
Chcete-li převést hodnoty v pixelech (px) na relativní jednotky měření (rem), musíte znát základní velikost písma určenou pro značku .
Jeden rem se rovná velikosti základního písma. Pokud je například základní velikost písma nastavena na 16px, pak 1rem odpovídá 16px.
| Hodnota v px | Význam v rem |
|---|---|
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
Chcete-li převést jakoukoli hodnotu na px v rem, musíte hodnotu v px rozdělit na základní velikost písma v px. Pokud je například základní velikost písma 16px a hodnota 24px, pak lze 24px zapsat jako 1.5 rem (24 / 16 = 1.5).
Výhodou použití relativních měrných jednotek, jako je rem, je jejich škálování spolu se změnou základní velikosti písma. Pokud změníte základní velikost písma z 16px na 20px, všechny hodnoty rem se automaticky přepočítají a přizpůsobí se nové velikosti.
Aplikace rem na dokument
Chcete-li použít rem na dokument, stačí nastavit velikost písma kořenovému prvku (obvykle tag ) v jednotkách rem. Poté můžete použít rem k zadání velikostí a odsazení uvnitř dokumentu.
Výhodou použití rem je, že všechny položky na stránce jsou automaticky škálovány podle velikosti písma kořenového prvku. To usnadňuje a zlepšuje adaptabilitu a dostupnost webové stránky.
Pokud například nastavíte velikost písma kořenového prvku na 16 pixelů, pak bude 1rem přesně 16 pixelů. Pokud nastavíte velikost písma na 24 pixelů, pak se 1rem rovná 24 pixelům.
Použití rem v procesu zpracování tak umožňuje vytvářet adaptivní a škálovatelné webové stránky, které budou vypadat dobře na různých zařízeních a v různých velikostech písma.
Test ideality
Jakmile postavíte svůj model "rem", je důležité zkontrolovat jeho ideál.
Ideálnost modelu znamená, že musí odrážet realitu co nejpřesněji.
Chcete-li posoudit ideál modelu, možná jej budete muset porovnat s jinými stávajícími modely, shromáždit zpětnou vazbu od vývojářů nebo uživatelů, otestovat a analyzovat výsledky.
Důležitou součástí kontroly ideality je vzorkování dat, na kterých bude analýza provedena.
Pamatujte, že dokonalost modelu je proces neustálé práce na jeho vylepšení.
Jeden model může být v určité fázi považován za ideální, ale v průběhu času a vývoje technických možností se mohou objevit nové požadavky a kritéria hodnocení.