Cesta k elegantnímu responzivnímu textu

autor:
Tweet
Share
Share
Pin

CSS (Cascading Style Sheets) je jedním ze stavebních kamenů uživatelských rozhraní ve webových, mobilních a desktopových aplikacích. Tento stylingový jazyk má různé hodnoty a vlastnosti, díky čemuž je snadné dát aplikacím různé styly a vlastnosti. REM je jednou z hodnot, se kterou se budete často setkávat, když stylujete své webové stránky pomocí CSS.

V tomto článku vysvětlím REM v CSS, proberu důležitost responzivní typografie ve webdesignu, popíšu, jak se počítají jednotky REM, a zmíním některé výhody používání REM v CSS.

Co je REM v CSS?

Root-EM (REM) jsou jednotky, které udávají velikost písma prvku vzhledem k velikosti písma kořenového prvku. REM je relativní jednotka, což znamená, že všechny hodnoty, které ji používají, se změní, když se změní velikost písma kořenového prvku. Výchozí velikost písma většiny prohlížečů je 16 pixelů. Pokud je tedy kořenový prvek 16px, velikost REM bude 1.

Jednotky REM jsou opakem absolutních jednotek, jako jsou pixely. Vezměte si například tento kód:

<div>Hello World</div>

Toto je náš styling:

div {
  border: 1.5px solid black;
  width: 200px;
}

Šířka bloku (200px) zůstane stejná bez ohledu na to, zda se velikost obrazovky zvětší nebo zmenší. Tato šířka není relativní k ničemu v našem HTML dokumentu.

Totéž platí pro okraj našeho kontejneru; zůstane 1,5 pixelu bez ohledu na variaci obrazovky nebo prostředí.

Význam responzivní typografie ve webdesignu

Responzivní typografie zahrnuje spoustu věcí, jako je rozložení textu, velikost a mezery. Toto jsou některé z důvodů, proč weboví designéři implementují responzivní web design:

  • Vylepšené uživatelské prostředí: Uživatelé webu jsou přitahováni aplikacemi, které se snadno orientují. Aplikace, která se přizpůsobí různým velikostem obrazovky a prostředí, nabízí příjemný a bezproblémový uživatelský zážitek.
  • Usnadňuje přizpůsobení různým výřezům: Responzivní typografie zkontroluje dostupné místo ve výřezu a podle toho se přizpůsobí. Nebudete tak mít případy přetažených textů na velkých obrazovkách nebo drobných textů na malých obrazovkách.
  • Lepší čitelnost: Dobrý web by měl být snadno přístupný a čitelný. Investice do responzivní typografie zajistí, že se text ve vaší aplikaci přizpůsobí velikosti a orientaci obrazovky.
  • Konzistentní branding: Jak se váš zdrojový kód zvětšuje, můžete mít ve své aplikaci různé varianty písem. Responzivní design zajišťuje konzistentní přístupy k návrhu bez ohledu na velikost obrazovky nebo chování uživatele.
  • Integruje se s mediálními dotazy: Responzivní typografii lze kombinovat s mediálními dotazy. Weboví návrháři mohou navrhovat různé styly prostřednictvím mediálních dotazů, kde se písma přizpůsobují na základě charakteristik, jako je orientace obrazovky a velikost.
  • Vylepšená dostupnost: Responzivní typografie je jedním ze základů přístupnosti aplikace. Uživatelé s různými schopnostmi tak mohou upravit velikosti obrazovky a písma tak, aby vyhovovaly jejich potřebám.
  Jak získat „Pokračovat ve sledování“ na vrcholu Netflixu

Jak se počítají jednotky REM

Jednotky REM se počítají ve vztahu k velikosti písma prvku (kořen). Tato funkce nám umožňuje vytvářet konzistentní a škálovatelné návrhy nastavením hodnot na základě jedné kořenové hodnoty.

Většina prohlížečů je standardně nastavena na 16px. Můžete však nastavit velikost písma kořenové hodnoty na číslo, například 10 pixelů. Můžete mít něco takového:

html {
  font-size: 10px;
}

V takovém případě je 10px=1 REM

Tento kód můžeme použít k demonstraci:

<!DOCTYPE html>
<html lang="en">
<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>
    <h1>Welcome to etechblog.cz</h1>
</body>
</html>

Tento kód nemá žádný styl a má jediný prvek, H1, který říká „Vítejte ve etechblog.cz“.

Velikost písma bude ve výchozím nastavení 16px, což znamená, že 1REM=16px. Když vykreslíme tuto stránku, dostaneme toto:

Nyní můžeme přidat šablonu stylů styles.css a předvést, jak funguje REM. Takto propojíte soubory styles.css a index.html v sekci dokumentu HTML:

   <link rel="stylesheet" href="https://wilku.top/the-path-to-elegant-responsive-text/styles.css">

Pak můžete mít tento kód:

html {
  font-size: 10px;
}

V tomto případě, když definujeme REM čísla, budou relativní k 10px. Velikost písma našeho H1 se také zmenší, jak ukazuje tento snímek obrazovky.

Nyní můžeme změnit velikost našeho H1 pomocí hodnot REM následovně:

h1 {
    font-size: 3.5rem; /* Equivalent to 35 pixels (3.5rem * 10px = 35px) */
  }

Naše H1 nyní bude větší na 35px=3,5REM.

  14 nejlepších aplikací Slack pro zvýšení produktivity

Výhody použití REM v CSS

Většina lidí je při psaní kódu CSS zvyklá na pixely (px) a procenta jako jednotky měření. Proč se nedržet těchto dvou možností místo toho, abyste se rozhodli pro jednotky REM? Zde je několik důvodů, proč používat REM:

  • Zvyšuje škálovatelnost: Můžete změnit velikost písma kořenového prvku, díky čemuž budou jednotky REM škálovatelné. Takový přístup usnadňuje proporcionální změnu jednotek REM. Jednotky REM se také upraví, když uživatelé upraví velikost písma svého prohlížeče.
  • Snadná správa: Můžete změnit kořenový prvek v tagu nebo a jednotky REM se automaticky přizpůsobí. Tento přístup vám ušetří bolest s úpravou každého prvku v souboru CSS. Můžete tak změnit velikost písma řekněme všech H1 jedinou změnou.
  • Konzistentní velikost: Jednotky REM řídí velikost písma a mezery. Máte tak jistotu, že budete mít na svých webových stránkách konzistentní velikosti písma vzhledem ke kořenovému prvku.
  • Umožňuje mít responzivní návrhy: Můžete vytvářet návrhy, které se přizpůsobí různým velikostem obrazovky a zařízením. Když se jednotky REM používají společně s dotazy na média, můžete upravit velikosti písma kořenového prvku a ostatní jednotky se přizpůsobí proporcionálně.

CSS REM vs. EM vs. procenta

Při psaní kódu CSS jste mohli narazit na pixely, REM, EM a procenta. I když se všechny tyto jednotky používají k definování velikostí písem a mezer, jsou použitelné v různých scénářích a přicházejí s různými funkcemi. Porovnejme REM s různými jednotkami:

REM vs EM

REM a EM jsou relativní jednotky, což znamená, že se mění na základě dané hodnoty. REM je však svázán s kořenovým prvkem (), zatímco EM je svázán s nadřazeným (kontejnerovým) prvkem. Například máte div, který funguje jako rodič, a další div uvnitř rodiče, který funguje jako dítě. Podívejte se na tento kód:

<div class="parent">
    <p>This is the parent element.</p>
    <div class="child">
      <p>This is the child element.</p>
    </div>
  </div>

Jednotky EM můžete nastavit následovně:

.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á však velikost písma 1,2 em, což je relativní k nadřazené třídě. Všechny změny v nadřazené třídě se automaticky přenesou do podřízeného prvku.

REM vs. procenta

Jednotky procent jsou relativní k velikosti/rozteči nadřazeného prvku. Pokud tedy máme nadřazený prvek, jako je , který má velikost písma 16 pixelů, můžeme nastavit podřízený prvek, jako je

, aby měl velikost písma 50 %, což znamená, že je 50 /100*16=8px.

Můžete to ilustrovat pomocí tohoto kódu:

body {
  font-size: 16px;
}
p {
  font-size: 50%;
}

Vztah mezi REM, EM a procenty můžeme shrnout pomocí této tabulky:

FeatureREMEMPercentageRelative toRoot elementParent element /containerParent element/ containerInheritanceFrom rootOd parentOd parentUse caseVhodné pro konzistentní rozvrženíVhodné pro relativní velikostiVhodné pro responzivní návrhyŠkálovatelnostAnoAno Relativní

Kdy nepoužívat jednotky REM

Možná budete v pokušení používat jednotky REM ve všech vašich měřeních CSS kvůli jejich mnoha výhodám. Toto jsou však některé z případů, kdy mohou být nevhodné:

  • Při práci s tiskem: Pokud chcete něco vytisknout, pak chcete mít jistotu, že máte co do činění s absolutními hodnotami. V takových případech vám palce nebo milimetry poskytují přesnou kontrolu nad rozměry.
  • Když chcete jemné ovládání: Pokud chcete ovládat velikost prvku, která je úzce svázána s nadřazeným prvkem, REM nebude dobrou volbou. V takových případech budou perfektní volbou absolutní nebo pevné jednotky, jako jsou pixely.
  • Při práci s animacemi a přechody: Jednotky REM nejsou vhodné tam, kde chcete, aby se velikost animací a přechodů postupně měnila. Když použijete jednotky REM, určitá 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 můžete použít procenta nebo jednotky založené na pixelech.

Závěr

Nyní doufáme, že rozumíte tomu, jak používat REM v CSS, vypočítat je a kde je použít. Hodnoty REM jsou relativní hodnoty, což znamená, že ve svých aplikacích můžete mít konzistentní velikosti písma.

Na druhou stranu pixely jsou absolutní hodnoty, které se nemění na základě velikosti výřezu nebo okolních prvků.

Takové hodnoty REM však nelze použít ve všech případech, protože existují případy, kdy procenta a pixely vyhovují lépe.

Zjistěte více o stylování pomocí těchto zdrojů CSS.

Byl tento článek užitečný?

Děkujeme vám za vaši reakci!