možná Budete muset smířit s pomocí flexibilní měrné jednotky, ale ty ještě nemusí plně pochopit, kdy použít rem a když na používání em. Tento tutoriál vám pomůže přijít na to!

emrem jsou flexibilní, škálovatelné jednotky, které jsou přeloženy do prohlížeče na pixel hodnoty, v závislosti na nastavení velikosti písma v návrhu. Pokud zadáte hodnotu 1em nebo 1rem, to může přeložit do prohlížeče jako něco od 16px160px nebo jakékoliv jiné hodnoty.

On the other hand px values are used by the prohlížeč tak, jak je, takže 1px se vždy zobrazí přesně jako 1px.

Zkuste posuvník na tento CodePen například vidět, jak hodnota remem jednotky lze přeložit do různých hodnot pixelů, přičemž je výslovně nastavit px jednotky zůstat pevná ve velikosti:

Velká Otázka

Pomocí emrem jednotek nám dává flexibilitu při našich návrhů, a schopnost rozsahu prvků nahoru a dolů, místo toho, aby uvízl s pevnou velikostí. Můžeme použít tuto flexibilitu, aby naše návrhy snazší upravit během vývoje, více citlivý, a aby prohlížeč uživatele na ovládání celkové měřítko stránky pro maximální čitelnost.

emrem jednotky poskytují tuto flexibilitu a práce v podobné způsoby, takže otázkou je, kdy bychom měli použít em hodnoty a, kdy bychom měli použít rem hodnoty?

Zásadní Rozdíl

rozdíl mezi emrem jednotky je to, jak prohlížeč určuje px hodnoty, které se promítají do. Pochopení tohoto rozdílu je klíčem k určení, kdy použít každou jednotku.

začneme tím, že projdeme, jak rem a em jednotky pracují od základů, abyste se ujistili, že znáte každý detail. Pak přejdeme k tomu, proč byste měli používat em nebo rem jednotky.

nakonec se podíváme na praktickou aplikaci přesně toho, na které prvky typického designu byste měli použít každý typ jednotky.

Jak rem Jednotky se Promítají do Hodnot Pixelů

Při použití rem jednotky, velikost pixelu přeloží, závisí na velikosti písma kořenového elementu stránky, tj. html elementu. Tato velikost kořenového písma se vynásobí jakýmkoli číslem, které používáte s vaší jednotkou rem.

například, s kořenový prvek velikost písma 16px10rem by se rovnala 160px, tedy 10 x 16 = 160.

Jak je Jednotky se Promítají do Hodnot Pixelů

Při použití em jednotky, hodnota pixelu můžete skončit s je násobkem velikosti písma na prvek jsou stylizované.

For example, if a div has a font size of 18px10em would equate to 180px, i.e. 10 x 18 = 180.

Important to Know:

je poněkud rozšířená mylná představa, že jednotky em jsou relativní k velikosti písma nadřazeného prvku. Ve skutečnosti jsou podle specifikace W3 relativní k velikosti písma „prvku, na kterém jsou použity“.

velikost písma nadřazeného prvku může ovlivnit hodnoty em, ale když k tomu dojde, je to pouze kvůli dědičnosti. Pojďme se podívat na to, proč, a uvidíme, jak to funguje v akci.

Vliv Dědičnosti na em Jednotky

Práce s em jednotky může začít se dostat složitější, když jde o dědictví, protože každý prvek automaticky zdědí velikost písma, jeho rodič. Vliv dědičnosti může být pouze přepsána výslovně nastavit písmo, velikost s jednotkou, není předmětem dědictví, např. px nebo vw.

velikost písma prvku, na kterém jsou použity jednotky em, určuje jejich velikost. Tento prvek však mohl zdědit velikost písma od svého rodiče, který zdědil velikost písma od svého rodiče atd. Jako takový je možné, aby jakákoli hodnota em byla ovlivněna velikostí písma kteréhokoli z jeho rodičů.

podívejme se na příklad. Nebojte se to vyzkoušet v CodePen pro sebe, jak jsme krok přes to. Jak budete pokračovat, použijte Chrome Vývojářské nástroje nebo Firebug pro Firefox kontrolovat hodnoty pixelů naše em jednotky jsou počítány do.

Příkladem je Dědictví

Pokud máme stránku s root velikost písma 16px (obvykle default) a dítě div uvnitř s polstrováním, 1.5em div, že zdědí velikost písma 16px kořenový element. Proto se jeho polstrování překládá na 24px, tj. 1,5 x 16 = 24.

Co když zabalíme další div kolem prvního a nastavíme jeho font-size na 1.25em?

Naše obal div dědí kořen velikost písma 16px a množí se, že jeho vlastní font-size nastavení 1.25em. Toto nastaví div velikost písma 20px, tj. 1.25 x 16 = 20.

nyní náš původní div již nedědí přímo z kořenového prvku, místo toho zdědí velikost písma 20px z nového nadřazeného div. Jeho hodnota výplně 1.5em nyní odpovídá 30px, tj. 1,5 x 20 = 30.

tento efekt škálování může být ještě umocněn, pokud přidáme em velikost písma na základě našeho původního div, řekněme 1.2em.

div dědí 20px velikost písma od jeho rodičů, pak násobí tím, že jeho vlastní 1.2em nastavení, což je nový velikost písma 24px, tj. 1,2 x 20 = 24.

1.5em výplň na našem div se nyní změní velikost s novou velikostí písma, tentokrát na 36px, tj. 1.5 x 24 = 36.

a Konečně, aby dále ilustrují, že em jednotky jsou relativní vzhledem k velikosti písma elementu jsou použity, (ne nadřazený prvek), pojďme se podívat, co se stane s naší polstrování 1.5em pokud jsme výslovně nastavit div použít velikost písma 14px, hodnota není předmětem dědictví.

nyní naše polstrování kleslo na 21px, tj. 1,5 x 14 = 21. Velikost písma nadřazeného prvku není ovlivněna.

s tímto potenciálem komplikací můžete vidět, proč je důležité vědět, jak používat jednotky em zvládnutelným způsobem.

Vliv Nastavení Prohlížeče na HTML Element, Velikost Písma

ve výchozím nastavení prohlížečů mají obvykle velikost písma 16px, ale to může být změněn, aby kdekoli od 9px na 72px uživatelem.

Důležité Vědět,:

prvek root html zdědí velikost písma z nastavení v prohlížeči, pokud není přepsán explicitně nastavenou pevnou hodnotou.

zatímco velikost písma na html elementu, je to, co přímo určuje rem hodnoty, které velikost písma může mít první pocházejí z nastavení prohlížeče.

nastavení velikosti písma prohlížeče tedy může ovlivnit hodnotu každé jednotky rem použité v návrhu, stejně jako každé jednotky em dědičností.

Nastavení Prohlížeče Efekt, Když Žádné HTML Velikost Písma je Nastavena

Pokud není přepsáno, html element bude dědit, co výchozí nastavení velikosti písma v prohlížeči. Vezměme si například web, kde není nastavena vlastnost font-size na prvku html.

pokud má uživatel prohlížeč s výchozí velikostí písma 16px, bude velikost kořenového písma 16px. V Nástrojích pro vývojáře Chrome můžete vidět, co prvek zdědil, zaškrtnutím Zobrazit zděděné vlastnosti na kartě vypočteno.

V tomto případě 10rem se rovná 160px, tedy 10 x 16 = 160.

Pokud uživatel narazí na velikost písma prohlížeče až na 18px, velikost kořenového písma se stane 18px. Nyní 10rem překládá se na 180px, tj. 10 x 18 = 180.

Prohlížeč Nastavení Efekt s em Jednotky HTML Velikost Písma

Když em založené velikost písma je nastavena na html elementu, pixel hodnotu, to znamená, že bude více prohlížeči nastavení velikosti písma.

například, pokud web je v html element měl font-size vlastnost nastavena na 1.25em, kořen velikost písma by být 1.25 krát prohlížeči nastavení velikosti písma.

Pokud prohlížeč písmo velikost byla nastavena na 16px, kořen velikost písma by vyjít jako 20px, tedy 1,25 x 16 = 20.

V tomto případě 10rem je rovno 200px, tedy 10 x 20 = 200.

Nicméně, pokud se v prohlížeči velikost písma byla nastavena na 20px, kořen velikost písma místo toho by se přeložit do 25px, tj. 1,25 x 20 = 25.

10rem je rovno 250px, tedy 10 x 25 = 250.

Sumarizace em vs. rem Rozdíl

Co všechny výše uvedené se scvrkává na toto:

• Překlady rem jednotky hodnota pixelu je dána velikost písma html elementu. Tato velikost písma je ovlivněna dědičností z nastavení velikosti písma prohlížeče, pokud není výslovně přepsáno jednotkou, která nepodléhá dědičnosti.

• překlad em jednotky na hodnoty pixelů je určen velikostí písma prvku, na kterém jsou použity. Tato velikost písma je ovlivněna dědičností z nadřazených prvků, pokud není výslovně přepsána jednotkou, která nepodléhá dědičnosti.

Proč používat rem jednotky:

největší síla, kterou rem jednotky nabízejí, není jen to, že dávají konzistentní dimenzování bez ohledu na dědičnost prvků. Spíše, je to, že nám dávají způsob, jak mít uživatelské nastavení velikosti písma ovlivnit každý aspekt stránek rozvržení pomocí rem jednotek, kde jsme zvyklí používat px jednotky.

z tohoto důvodu je primární účel použití rem jednotky by mělo být, aby zajistily, že cokoliv, co výchozí velikost písma má uživatel svůj prohlížeč nastavit, dispozičně upraví tak, aby odpovídala formátu textu v rámci.

web může být navržen zpočátku se zaměřením na nejběžnější výchozí velikost písma prohlížeče 16px.

a pomocí rem jednotky, pokud uživatel zvyšuje jejich písmo, velikost, celistvost rozložení bude zachován, a text se nebude mačkat v tuhé prostor určený pro menší text.

A pokud uživatel snižuje jejich velikost písma, celé rozložení váhy dolů, a nebudou vlevo s malým houfem textu, v pustině prázdného místa.

Uživatelé změnit velikost písma nastavení pro všechny druhy důvodů, z napjaté zrak k výběru optimálního nastavení pro zařízení, která mohou být diametrálně liší ve velikosti a pozorovací vzdálenosti. Přizpůsobení těchto nastavení umožňuje mnohem lepší uživatelské zkušenosti.

důležité vědět:

Někteří návrháři použít rem na základě uspořádání ve spojení s pevným px jednotka font-size nastavení html elementu. To se obvykle provádí tak, že změna velikosti písma na elementu html může celkově měnit design nahoru nebo dolů.

důrazně nedoporučuji, protože přepíše velikost písma prvek html zdědí z nastavení prohlížeče uživatele. Tím se zabrání tomu, aby nastavení mělo jakýkoli účinek, a odstraní se schopnost uživatele optimalizovat pro nejlepší prohlížení.

Pokud chcete změnit velikost písma na html elementu, takže s em nebo rem hodnoty jako kořene velikost písma se pak stále více z prohlížeče uživatele nastavení velikosti písma.

to vám stále umožní škálovat váš návrh nahoru nebo dolů změnou velikosti písma prvku html, ale zachováte efekt Nastavení uživatelského prohlížeče.

Proč Používat em Jednotky

klíčové hodnoty em jednotky nabízejí, je, že umožňují dimenzování hodnoty, které určí velikost písma než html elementu.

z tohoto důvodu by primárním účelem jednotek em mělo být umožnit škálovatelnost v kontextu konkrétního konstrukčního prvku.

například, můžete nastavit paddingmarginline-height kolem navigační menu pomocí em hodnoty.

Tímto způsobem, pokud změníte v menu velikost písma, mezery kolem položky v menu měřítko proporcionálně, nezávisle na zbytku rozložení.

V předchozí části týkající se dědické viděl jsi, jak rychle sledovat em jednotky může vymknout z rukou. Z tohoto důvodu doporučuji používat jednotky em, pouze pokud zjistíte, že je potřebujete.

praktická aplikace

mezi webovými designéry může být nějaká debata a jsem si jistý, že různí lidé mají různé preferované přístupy, nicméně moje doporučení je následující.

použijte em jednotky pro:

jakékoli velikosti, které by se měly měnit v závislosti na velikosti písma jiného prvku než kořenového adresáře.

obecně lze říci, že jediným důvodem, proč budete muset použít em jednotky, je měřítko prvku, který nemá výchozí velikost písma.

podle výše uvedeného příkladu mohou mít konstrukční komponenty, jako jsou položky nabídky, tlačítka a nadpisy, své výslovně uvedené velikosti písma. Pokud změníte tyto velikosti písma, chcete, aby se celá komponenta přiměřeně měnila.

Společné vlastnosti těchto obecných zásad se bude vztahovat na marginpaddingwidthheightline-height nastavení, při použití na prvky s non výchozí písmo velikosti.

doporučujeme, že když budete dělat zaměstnávat em jednotky, velikost písma prvek jsou použity na by měla být nastavena v rem jednotky zachovat škálovatelnost, ale vyhnout dědictví zmatek.

Obvykle nemají Používat em Jednotky pro velikost Písma

je To docela běžné vidět em jednotky použité pro písmo velikosti, a to zejména v číslech, nicméně já bych naznačují, že návrhy jsou více zvládnutelné, pokud rem jednotky se obvykle používají pro písmo velikosti.

důvod, proč nadpisy často používat em jednotek je, že jsou lepší volbou než px jednotky, je relativní k normální velikosti textu. Nicméně rem jednotky mohou dosáhnout tohoto cíle stejně dobře. Pokud je provedena jakákoli úprava velikosti písma na elementu html, velikost nadpisu se bude stále měnit.

zkuste změnit em velikost písma nahtml prvek v tomto CodePen vidět sami:

častěji než ne, nechceme, aby se naše velikosti písma měnily na základě jakéhokoli jiného prvku než kořenového adresáře, až na několik výjimek.

Jedním z příkladů, kde bychom mohli chtít, em podle velikosti písma by mohla být rozbalovací menu, kde máme druhé úrovni menu položka text velikosti v závislosti na velikosti písma první úrovně. Dalším příkladem může být ikona písma použitá uvnitř tlačítka, kde by velikost ikony měla souviset s velikostí textu tlačítka.

Nicméně většina prvků v web design bude mají tendenci mít tento typ požadavku, takže obvykle budete chtít použít rem jednotky pro písmo velikosti, s em jednotkami pouze tam, kde je konkrétně potřeba.

Použití rem jednotky pro:

Jakékoliv velikosti, která nepotřebuje em jednotky z důvodů popsaných výše, a to by mělo stupnice v závislosti na prohlížeči nastavení velikosti písma.

to představuje téměř vše ve standardním designu, včetně většiny výšek, většiny šířek, většiny polstrování, většiny okrajů, šířky okrajů, většiny velikostí písma, stínů, v podstatě téměř každé části Rozvržení.

Stručně řečeno, vše, co lze škálovat pomocí jednotek rem, by mělo být.

Tip

Při vytváření rozvržení je často jednodušší myslet v pixelech, ale výstup v rem jednotky.

můžete mít pixel na rem výpočty provádí automaticky pomocí preprocesoru jako Stylus / Sass / Less, nebo postprocesor jako PostCSS s PXtoRem plugin.

Alternativně můžete použít PXtoEM k manuálnímu provádění konverzí.

Použití rem Dotazy Médií

Důležité je, že při použití rem jednotky vytvořit jednotně škálovatelný design, vaše dotazy médií by měl být také v rem jednotky. Tím zajistíte, že bez ohledu na velikost písma prohlížeče uživatele budou vaše mediální dotazy reagovat na něj a upravit rozvržení.

pokud například uživatel zvětšuje text velmi vysoko, může být nutné, aby se vaše rozvržení zmenšilo ze dvou sloupců na jeden sloupec, stejně jako na menším mobilním zařízení.

pokud jsou vaše zarážky na pevných šířkách Pixelů, může je spustit pouze jiná velikost výřezu. Nicméně s rem založené zarážky budou reagovat i na různé velikosti písma.

nepoužívejte em nebo rem pro:

Multi Rozložení Sloupců Šířky

šířky Sloupců v rozvržení by měl být typicky % založený, takže mohou plynule fit nepředvídatelně velké výřezy.

jednotlivé sloupce by však měly stále obsahovat hodnoty rem pomocí nastavení max-width.

například:

.container { width: 100%; max-width: 75rem;}

To udržuje sloupec flexibilní a škálovatelné, ale zabraňuje to od stávat se příliš široký pro text v něm být pohodlně čitelný.

pokud by měl být prvek striktně nevyrovnatelný

v typickém webovém designu nebude mnoho částí vašeho rozvržení, které nelze navrhnout pro škálovatelnost. Občas však narazíte na prvky, které skutečně potřebují použít explicitní pevné hodnoty za účelem zabránění škálování.

předpokladem pro použití pevných hodnot velikosti by mělo být, že pokud by byl daný prvek zmenšen, zlomil by se. To opravdu nepřichází často, takže než budete v pokušení vytáhnout tyto jednotky px, zeptejte se sami sebe, zda je jejich použití absolutní nutností.

Balení

Pojďme se rychle odrážka rekapitulace toho, co jsme probrali:

• remem jednotky jsou počítány do hodnot pixelů v prohlížeči, na základě velikosti písma ve vašem designu.
• em jednotky jsou založeny na velikosti písma prvku jsou použity na.
• rem jednotky jsou založeny na velikosti písma prvku html.
• em jednotky může být ovlivněna velikost písma dědictví z jakéhokoliv nadřazeného prvku

• rem jednotky může být ovlivněna velikost písma dědictví z prohlížeče nastavení písma.

• Použití em jednotky pro dimenzování, které by měly měřítku v závislosti na velikosti písma prvku jiné než root.
• Použití rem jednotky pro dimenzování že není třeba em jednotky, a to by mělo stupnice v závislosti na prohlížeči nastavení velikosti písma.
• použijte rem jednotky, pokud si nejste jisti, že potřebujete em jednotky, včetně velikostí písma.
• Použití rem jednotky na dotazy médií
• nepoužívejte em nebo rem v multi rozložení sloupců šířky – použití % místo.
• nepoužívejte em nebo rem pokud by škálování nevyhnutelně způsobilo přerušení prvku rozvržení.

doufám, že jste nyní postaven na robustní a kompletní obraz, jak přesně emrem jednotky práce, a přes to, že vědí, jak nejlépe využít ve vašich designech.

doporučuji vám vyzkoušet použití pokyny obsažené v tomto návodu pro sebe a užijte si plnohodnotnou škálovatelnost a schopnost reagovat na rozložení oni vám umožní vytvořit.