Měřící jednotka REM v CSS - obecné informace a metody použití

V pravidlech CSS se používají dvě varianty měřicích jednotek: absolutní a relativní. Zpočátku byla známá pouze jedna absolutní jednotka - pixel. Jeho velikost závisela na matici nebo monitoru a bylo snadné jej počítat sama.

nevýhody používání pixelů

DTP běžící na straně médií, že je důležité upozornit na obsah. Mělo by být snadno čitelné, přičemž optimální délce vedení a dostatečné velikosti, aby i uživatelé s nízkou vizí bylo vhodné přijmout text. Bez ohledu na to, jaké zařízení je uživatel přečtení článku a zda má dobrý zrak - to je důležité pochopit obsah článku bez speciálních zařízení. Při použití pixelů uložení zoom často vede k tomu, že počet slov na lajnu snížil objeví ošklivý obtékání textu nebo obsahu nemá vypadnout z kontejneru. Takže weboví vývojáři a návrháři začali používat při psaní kódu a relativní procento měrné jednotky, jako jsou EM, REM. Ale stále nemohli úplně vytlačit pixely.


Příběh relativních jednotkách

Vzhledem k tomu, aby byla první strana ve většině prohlížečů nejsou normované pixelů dlouho zůstalo jedinou možností popisu velikosti písma. Ale s vývojem webových technologií se objevila potřeba vytvořit nové jednotky měření. Takže tam a EM%, a pak REM, jejichž hodnoty jsou vázány na standardního webového prohlížeče a je obvykle rovna16 pixelů Existuje empirické pravidlo, které kombinuje základní velikost písma: 100% = 1 em ~ 16px ~ 14pt. To znamená, že pokud ve všech podřízených prvcích neměníte velikost písma, ve výchozím nastavení bude v prohlížeči přibližně 16 pixelů a asi 14pt (typografický bod), ale vždy 100% a 1 em.


Použití relativních jednotek měření usnadňujícího uspořádání, které činí modulární prvky zvládnutelnějšími. Moderní technologie vyžaduje, aby při změně velikosti prvků na stránkách byly různé velikosti v závislosti na obrazovce oprávnění nebo v okně prohlížeče uživatele. Proto se EM a REM v CSS staly nepostradatelným pomocníkem při vytváření webů, které vyžadují přizpůsobivé velikosti písma. Většina prohlížečů nemá v současné době problémy s měřítkem textu a jejich chování při zvyšování nebo zmenšování velikosti písma je v souladu s ostatními. Každé rozložení by však mělo být kontrolováno v několika prohlížečích, včetně těch, které jsou zastaralé, aby pochopili, jak vypadá konečný výsledek pro různé uživatele.

Použití relativních jednotek

Relativní měřicí jednotky, tak běžné v typografii a CSS, - EM a REM, jsou méně známé obyvatelům než pixely. Ne každý návrhář nebo plánovač pro začátečníky rozumí jejich účelu a používá je správně. Mezi profesionálními designéry stále existují spory, kdy je lepší používat jednu či druhou jednotku. Nicméně relativní jednotky značně usnadňují citlivé uspořádání a jsou považovány za nejefektivnější způsob při konstrukci modulárních komponent. EM a REMse používají k určení velikosti různých prvků - záhlaví, okraje, rámečky. Ale jejich velikosti jsou vypočítány odlišně.

Co je to EM

EM je relativní jednotka měření, která závisí na velikosti písma nadřazeného prvku. Často je předepsáno v pravidle CSS pro značku těla. Tento tag definuje parametry všech prvků na stránce. Jak pochopit jednotky EM v CSS a vypočítat jejich hodnoty? Všechno je docela jednoduché. Pokud je velikost písma (tj. Velikost písma) voliče těla 10 pixelů, 1 EM je také 10 pixelů, tj. Nastavovač udává hodnotu této jednotky samostatně. V důsledku toho budou všechny ostatní dimenze uvedené v EM vypočítány na základě této hodnoty. Texty, jejichž parametry jsou nastaveny v pixelech av relativních jednotkách, se nemusejí měnit vizuálně, dokud nebudou muset být změněny. Ale jsou velmi vhodné při vytváření flexibilních modulárních bloků. Pokud nenastavíte velikost písma, ale použijete relativní jednotky v kódu, budou ve výchozím nastavení vypočítány a 1 EM bude 16 pixelů.

Vlastnosti měřicí jednotky EM

Při použití relativních jednotek měření EM existuje i další funkce. Pokud je velikost písma v přepínači nastavena na 2 EM, pak při použití EM v parametrech pro jinou vlastnost ve stejném voliči bude hodnota této jednotky použita jinak. V důsledku toho se velikost prvku zdvojnásobí. Parametry EM se vypočítají na základě velikosti písma v konkrétním bloku. To znamená, že je-li velikost písma voliče odstavce (značka "p") rovna 2 EM, a protělo je 10 pixelů, pak při přidání do voliče p velikost vnějšího okraje textu ("okraj") v tloušťce 1 EM bude rovna 10 a 20 pixelům.
Abyste získali velikost písma rovnou 10 pixelům, musíte použít 05 EM. Takové změny hodnot v různých částech kódu jsou často zaměňovány začínajícími řemeslníky. Tam byl také problém používat EM v CSS - při nastavení velikosti písma 0875 EM, každý následující připojený prvek byl snížen. Nežádoucí účinky způsobily použití tohoto přístroje a spodní okraj. V tomto případě velikost písem ovlivnila pole kolem prvku, stejně jako v EM přímo související s tímto parametrem blokového modelu.

Měření REM v CSS

Nyní se podíváme, jaká měřicí jednotka REM je a jak ji používat. První zmínka o REM se objevila v roce 2011 v komentáři k článku od německého developera Gerrita van Aakena o použití pixelů v kódu CSS. Tato relativní jednotka je blízká hodnotě EM a její jméno je přeloženo jako "root EM" nebo "kořenová em". Chování REM je předvídatelnější. Použití této jednotky v rozvržení umožňuje snadno vypočítat velikost prvků v různých částech kódu, protože REM v CSS se rovná hodnotě velikosti písma nastavené pro kořenový prvek, značku HTML. Ale častěji se tato hodnota přidává do těla, aby se vyloučily chyby výpočtu. Použití REM v CSS, pokud není jeho hodnota zapsána v tagu HTML, je ještě jednodušší. 1 REM se bude rovnat standardním 16 pixelům, jako v případě EM, jehož hodnota není nastavena.

Spory opoužijte REM v CSS. REM vs. EM

REM a EM mají své plusy a minus. Mezi zpracovateli existuje spousta kontroverzí, která se vztahuje na měřicí jednotku při psaní kódu. To je věřil, že použití REM v CSS dělá uspořádání méně modulární, a EM komplikovat rozložení a vyžaduje pečlivý přístup a výpočty. Každý instalátor v procesu práce sám si sám zvolí, kterou jednotku měření a kde se má použít. Ale v počáteční fázi jsou pixely ještě lepší. EM je lepší pro položky, jejichž vlastnosti jsou měněny podle velikosti písma. V ostatních případech je REM vhodnější.

Použití REM v záhlavích

Zvažme, jak se záhlaví textu (tagy h1-h6) změní, pokud jsou zapsány v REM. Předpokládejme, že hlavička obsahuje pole kolem ní - polstrování, pozadí a zadaná velikost písma. Chcete-li zvýšit titul, bude mezera mezi hranami prvku snížena, takže polstrování bude muset být překonáno. Ale pak je tu problém se skutečností, že všechny prvky prostě přestanou být obsaženy na stránce. Ale v pixelech je nastavena velikost písma, a pak se v nastavení prohlížeče pokuste jej změnit na větší, nic se nestane. Při použití funkce REM se zvýší a sníží v závislosti na uživatelských preferencích.

Omezení na kořenový adresář

REM pomáhá vytvářet kaskádové tabulky s různými velikostmi písma pro nadpisy a odstavce. To značně zjednodušuje rozvržení, protože není nutné zcela měnit kód - stačí opravit velikost písma v tagu html. Existuje také limit pro používání tohoto přístroje. Ve starších verzích prohlížečů Opera a IE aněkteré prohlížeče Android ještě nejsou podporovány. Proto jsou vývojáři nuceni používat pixely jako záložní volbu a zapisovat duální kód. Moderní prohlížeče budou číst čáry s velikostí písma v pixelech a překládají je do REM a zastaralé jednoduše nezobrazí kód s neznámou měrnou jednotkou. Ale pokud jste na to zapomněli a začali vyvíjet stránky pro určitou obrazovku, pak můžete ztratit mnoho uživatelů, kteří prostě nemohou přijmout obsah, přerušený pomocí REM nebo EM.

Nové způsoby zadání velikosti textu

Seznam velikostí CSS nyní obsahuje nejen možnosti uvedené výše. Byly zde nové položky:
  • VW - rovnající se šířce prohlížeče 1/100.
  • VMIN - 1/100 menší strana okna prohlížeče.
  • VMAX - 1/100 na větší straně okna prohlížeče.
  • VH - odpovídá délce prohlížeče 1/100.
  • EX - V závislosti na výšce písmena "x" v malém písmenu.
  • CH - se vypočítá podle symbolu "0" v písmu aktuálního prvku.
  • Většina těchto možností se také používá k návrhu flexibilních rozvržení stránek, kde je velikost kontejneru měřena v závislosti na velikosti okna prohlížeče. Ale pro pohodlné měřítko stránky je obvykle dost EM nebo REM.

    Související publikace