CSS, neboli kaskádové styly, představují klíčový prvek při tvorbě uživatelských rozhraní pro webové stránky, mobilní aplikace i desktopové programy. Tento jazyk pro úpravu vzhledu umožňuje nastavit různé vlastnosti a hodnoty, čímž je dosaženo jedinečného stylu aplikací. Jednotka REM, s níž se při stylování webu pomocí CSS často setkáte, je jednou z těchto hodnot.
V tomto textu si detailněji rozebereme, co přesně REM v CSS znamená, jaký je význam responzivní typografie při návrhu webových stránek a jak se jednotky REM počítají. Zmíníme se také o výhodách, které používání jednotek REM v CSS přináší.
Co je REM v CSS?
Root-EM (REM) definuje velikost písma elementu v závislosti na velikosti písma kořenového prvku. Jedná se o relativní jednotku, což znamená, že všechny hodnoty, které ji používají, se mění s úpravou velikosti písma kořenového elementu. Výchozí velikost písma, kterou nastavuje většina prohlížečů, je 16 pixelů. To znamená, že když má kořenový element velikost písma 16px, velikost REM je rovna 1.
Jednotky REM se odlišují od absolutních jednotek, jako jsou pixely. Uveďme si příklad:
<div>Ahoj světe</div>
A takto vypadá styl:
div {
border: 1.5px solid black;
width: 200px;
}
Šířka bloku (200px) zůstane neměnná bez ohledu na to, zda se velikost obrazovky zvětší nebo zmenší. Tato šířka se nevztahuje k žádné jiné hodnotě v našem HTML dokumentu.
To samé platí pro ohraničení našeho kontejneru, které má 1,5 pixelu bez ohledu na změny obrazovky nebo prostředí.
Význam responzivní typografie ve webovém designu
Responzivní typografie zahrnuje různé aspekty, například rozvržení textu, jeho velikost a mezery mezi jednotlivými prvky. Weboví designéři ji implementují z následujících důvodů:
- Zlepšená uživatelská zkušenost: Uživatelé preferují webové stránky, které se snadno používají a v nichž se dobře orientují. Web, který se umí přizpůsobit různým velikostem obrazovky a prostředím, přináší uživatelům pohodlí a plynulý zážitek.
- Snadné přizpůsobení různým rozlišením: Responzivní typografie se automaticky přizpůsobuje dostupnému prostoru v okně prohlížeče. Díky tomu se vyhneme situacím, kdy je text na velkých obrazovkách příliš roztažený a na malých zařízeních naopak příliš drobný.
- Lepší čitelnost: Dobrý web by měl být snadno čitelný. Díky responzivní typografii se text v aplikaci přizpůsobuje velikosti i orientaci obrazovky.
- Konzistentní vizuální styl: I když se objem zdrojového kódu postupně zvětšuje, responzivní design zajišťuje konzistentní přístup k vzhledu stránek bez ohledu na velikost obrazovky nebo chování uživatelů.
- Integrace s media queries: Responzivní typografii lze efektivně kombinovat s mediálními dotazy. Tvůrci webů mohou vytvářet různé styly pomocí media queries, kde se písmo přizpůsobuje charakteristikám, jako je orientace a velikost obrazovky.
- Vylepšená přístupnost: Responzivní typografie patří k základním prvkům přístupnosti webových stránek. Umožňuje uživatelům s různými potřebami přizpůsobit si velikost obrazovky a písma tak, aby vyhovovala jejich specifickým požadavkům.
Jak se počítají jednotky REM
Jednotky REM se počítají na základě velikosti písma elementu <html> (kořenového). Tato funkce nám umožňuje vytvářet konzistentní a škálovatelné návrhy tím, že se hodnoty nastavují na základě jediné kořenové hodnoty.
Většina prohlížečů má výchozí nastavení na 16px. Nicméně je možné nastavit velikost písma kořenového elementu na jiné číslo, například 10 pixelů. Můžete použít například následující kód:
html {
font-size: 10px;
}
V takovém případě platí, že 10px=1 REM.
Pro demonstraci si můžeme ukázat tento kód:
<html lang="cs"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h2>Vítejte na etechblog.cz</h2> </body> </html>
Tento kód nemá žádný styl a obsahuje pouze element H2 s textem „Vítejte na etechblog.cz“.
Velikost písma bude standardně 16px, což znamená, že 1REM=16px. Po zobrazení stránky uvidíme následující:
Nyní můžeme přidat šablonu stylů styles.css a ukázat si, jak funguje REM. Propojení souborů styles.css a index.html v sekci <head> dokumentu HTML se provádí takto:
<link rel="stylesheet" href="https://wilku.top/the-path-to-elegant-responsive-text/styles.css">
Poté můžete použít tento kód:
html {
font-size: 10px;
}
V tomto případě budou všechna čísla REM relativní k 10px. Velikost písma našeho H2 se zmenší, jak ukazuje tento obrázek:
Nyní můžeme velikost našeho H2 změnit pomocí hodnot REM:
h2 {
font-size: 3.5rem; /* Odpovídá 35 pixelům (3.5rem * 10px = 35px) */
}
Naše H2 bude nyní větší o velikost 35px=3,5REM.
Výhody použití REM v CSS
Většina programátorů je při psaní CSS zvyklá používat pixely (px) a procenta jako měřicí jednotky. Proč bychom se tedy měli rozhodnout pro REM místo těchto dvou možností? Zde je několik důvodů:
- Zvyšuje škálovatelnost: Díky možnosti měnit velikost písma kořenového prvku se jednotky REM stávají škálovatelnými. Tento přístup usnadňuje proporcionální změnu jednotek REM. Jednotky REM se také přizpůsobí, když uživatelé změní velikost písma v prohlížeči.
- Snadná správa: Stačí změnit kořenový prvek v tagu <html> nebo <body> a jednotky REM se automaticky přizpůsobí. Tímto způsobem nemusíte upravovat každý prvek v souboru CSS zvlášť. Stačí tak změnit velikost písma, například u všech H2, jednou změnou.
- Konzistentní velikost: Jednotky REM řídí velikost písma a mezery. Máte tedy jistotu, že budete mít na webových stránkách konzistentní velikosti písma, které vycházejí z kořenového prvku.
- Umožňuje responzivní návrhy: Můžete vytvářet návrhy, které se přizpůsobí různým velikostem obrazovek a zařízení. Pokud se jednotky REM používají společně s media queries, můžete upravit velikost písma kořenového prvku a ostatní jednotky se proporcionálně přizpůsobí.
CSS REM vs. EM vs. procenta
Při programování v CSS jste se mohli setkat s pixely, REM, EM a procenty. I když se všechny tyto jednotky používají k definování velikosti písma a mezer, mají různá použití a funkce. Porovnejme si tedy REM s ostatními jednotkami:
REM vs EM
REM i EM jsou relativní jednotky, což znamená, že se mění na základě určité hodnoty. Jednotka REM se však vztahuje ke kořenovému prvku (<html>), zatímco EM k nadřazenému (kontejnerovému) elementu. Například, máte div, který funguje jako rodič, a další div uvnitř rodiče, který je dítě. Podívejte se na tento kód:
<div class="parent">
<p>Toto je rodičovský element.</p>
<div class="child">
<p>Toto je dceřiný element.</p>
</div>
</div>
Jednotky EM můžete nastavit takto:
.parent {
font-size: 1.5em;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
.child {
font-size: 1.2em;
color: #333;
}
Třídě .parent jsme přiřadili velikost písma 1.5em. Element .child má velikost písma 1.2 em, která je relativní k rodičovské třídě. Všechny změny v rodičovské třídě se automaticky projeví v dceřiném elementu.
REM vs. procenta
Procenta se vztahují k velikosti/rozteči nadřazeného elementu. Pokud tedy máme rodičovský element, jako je <body>, který má velikost písma 16 pixelů, můžeme podřízený element, jako je <p>, nastavit na velikost písma 50 %. To znamená, že bude 50 /100*16=8px.
Můžeme to ilustrovat tímto kódem:
body {
font-size: 16px;
}
p {
font-size: 50%;
}
Vztah mezi REM, EM a procenty můžeme shrnout do této tabulky:
| Funkce | REM | EM | Procenta |
|---|---|---|---|
| Vztahuje se k | Kořenový element | Nadřazený element/kontejner | Nadřazený element/kontejner |
| Dědičnost | Od kořene | Od rodiče | Od rodiče |
| Použití | Vhodné pro konzistentní rozvržení | Vhodné pro relativní velikosti | Vhodné pro responzivní návrhy |
| Škálovatelnost | Ano | Ano | Relativní |
Kdy nepoužívat jednotky REM
Možná vás láká používat jednotky REM pro všechny vaše měření v CSS díky jejich mnoha výhodám. Nicméně v některých případech mohou být nevhodné:
- Při práci s tiskem: Pokud chcete něco vytisknout, je potřeba pracovat s absolutními hodnotami. V takových případech poskytují palce nebo milimetry přesnou kontrolu nad rozměry.
- Když chcete jemné ovládání: Pokud chcete ovládat velikost elementu, která je úzce svázaná s nadřazeným elementem, REM nebude dobrá volba. V takových případech jsou ideální absolutní nebo pevné jednotky, jako jsou pixely.
- Při práci s animacemi a přechody: Jednotky REM nejsou ideální tam, kde chcete, aby se velikost animací a přechodů plynule měnila. Změna velikosti písma kořenového prvku způsobí náhlé změny v přechodech nebo animacích.
- Při práci se staršími prohlížeči: Některé starší prohlížeče nepodporují jednotky REM. V takových případech je lepší používat procenta nebo jednotky založené na pixelech.
Závěr
Doufáme, že nyní rozumíte tomu, jak používat REM v CSS, jak je vypočítat a kde je použít. Hodnoty REM jsou relativní hodnoty, které umožňují, aby se velikost písma v aplikacích chovala konzistentně.
Na druhou stranu, pixely jsou absolutní hodnoty, které se nemění na základě velikosti okna prohlížeče nebo okolních elementů.
Je ovšem důležité mít na paměti, že jednotky REM nejsou vhodné pro všechny případy a někdy je naopak lepší používat procenta nebo pixely.
Doporučujeme prozkoumat i další zdroje informací o stylování pomocí CSS.
Byl tento článek užitečný?
Děkujeme za vaši odezvu!