Navrhněte citlivým místem s emisemi na bázi EM

Sep 14, 2025

jak

Pravděpodobně jste slyšeli, že byste měli používat relativní jednotky pro velikost písma. To je dobré pravidlo pro přístupný web design; Pokud uživatel změní výchozí velikost písma prohlížeče, umožňuje odpovídajícím způsobem změnit text vaší stránky. Možná jste přijali tuto radu a provedl přepínač. Možná jste vybavili kalkulačku a převedli velikosti písma vašich stránek od absolutního stavu px. Jednotky k EMS nebo, častěji, REMS.

Ale pokud je to tam, kde jste se zastavil, chybí vám hodně flexibility a moci, kterou EMS přinese do prohlížeče. Jednotka EM není pouze náhrada za známé px. ; Můžete ji použít pro více vlastností než jen velikost písma . Pokud ano, některé z jeho dalších výhod se začínají objevovat.

Od konzistentně pomocí EMS můžete navrhnout komponenty na stránce, která bude automaticky reagovat, pokud se změní velikost písma. Poté, s chytrým trikem pro citlivou velikost písma, můžete vytvořit celou stránku, která se dynamicky upraví na základě šířky výřezu prohlížeče. Dovolte mi ukázat, jak využít "relativní" chování EMS vytvořit návrhy, které jsou škálovatelné a reagující.

Velikost písma

Použití EMS pro velikost písma může být složitá. Přesná hodnota je určena zděděným velikostí písma prvku (tj. Velikost písma nadřazeného prvku). To se dostane komplikovaný, když začnete hnízdní prvky více hluboce. Pokud má prvek velikost písma v EMS, jeho rodič má velikost písma v EMS a jeho rodič má ještě další. Budete muset vynásobit všechny tyto hodnoty, abyste určili skutečnou vypočtenou hodnotu podřízeného prvku.

To znamená, že umístění stejného modulu v různých kontejnerech může změnit význam em. Modul bude nepředvídatelný.

Aby se tomu zabránilo, obvykle používáme jinou relativní jednotku pro velikost písma: REMS. REM (nebo 'root em') není založen na zděděné velikosti písma, ale na velikosti písma kořenového prvku stránky, & lt; html & gt; . To znamená, že jeho hodnota je stejná po celou stránku. Je to předvídatelnější než a často výhodnější, pravidelné EMS.

Budování modulu s EMS

Použijte relativní jednotky pro vytvoření modulu. Nicméně nebudeme následovat společný přístup. Místo použití REM pro vše, použijeme pouze jednou: na nejvíce nejvíce prvku modulu. To zřídí známou velikost písma pro modul, spíše než je založena na nepředvídatelném řetězci hodnot Em nad ním v Dom. To znamená, že můžeme snadno měnit velikost modulu přepsáním jedné hodnoty.

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — Použijte REMS na nejvzdálenějším prvku pro vytvoření známé velikosti písma, pak použijte EMS k sestavení na základě této hodnoty

Poté, co zjistíme tuto známou velikost písma, jsme bezpečí používat běžné EMS v celém modulu. Použijte jej nejen pro všechny velikosti písma na podoblasti, ale také pro většinu ostatních vlastností, včetně polstrování , okraj a hraniční poloměr .

Budeme stavět panel s nadpisem a tělem. Markup vypadá takto:

 & lt; divá třída = "panel" & gt;
  & lt; dig class = "panelový míří" & gt;
    & lt; h3 & gt; hle sílu ems & lt; / h3 & gt;
  & lt; / div & gt;

Podívejme se na vnější kontejner. Nastavíme velikost písma na 1Rem. vytvořit naši místní hodnotu Em. Pak definujeme hraniční poloměr pomocí EMS. Obvykle ráda používám px pro hranice, ačkoli, abych získal pěknou jemnou linii.

 .Panel {
  Velikost písma: 1rem;
  Hranice: 1px Solid # 678;
  okruh pohraničí: 0.3EM;
  Přetečení: skryté;
}

Dále styl vnitřních prvků. Použijeme EMS pro polstrování. Pak se zvýšíme velikost písma čísla na 1,25 násobku naší místní hodnoty EM, vytváří 20px vypočítanou velikost.

 .Panel-geografie {
  Polstrování: 0.6em 1.2EM;
  barva pozadí: #cde;
  Border-dno: 1px Solid # 678;
}
.Panel-geografie a gt; h3 {
  Velikost písma: 1.25EM;
  marže: 0;
  Rozteč dopisů: 0.03em;
}
.Panel-tělo {
  Polstrování: 0.6em 1.2EM;
}

Hodnoty polstrování můžete vynásobit podle velikosti písma pro určení vypočtených hodnot (9.6px vertikální a 19.2px horizontální). Pravdivě, ale nezáleží na tom. Snažte se dostat s pixelem-dokonalým měřením. To se může cítit trapné, ale stiskněte. Čím více používáte EMS, tím více se s nimi seznámíte s nimi jako jednotka ve svém vlastním respektu.

Dynamicky měřítko designu

Když vytvářejí opakovaně použitelné moduly, jako je tento, často zjistíme, že potřebujeme několik variant. Řekni, že jsme chtěli vytvořit větší verzi. Kdybychom používali px za všechno, to by znamenalo zvýšení velikosti písma, polstrování, okruh hranice a tak dále. Nicméně, protože jsme definovali vše ve vztahu k jedné velikosti fondu REM, musíme změnit tuto hodnotu, a celý modul bude reagovat:

 .Panel - velký {Velikost písma: 1.2rem; }

Tuto třídu prostě přidáváme na panel, aby bylo větší: & lt; dig class = "panel panelu - velký" & gt; . To změní místní definici EM, a tedy poloměr hranice a změna polstrování, spolu s velikostí písma jeho podřízených prvků. S jediným prohlášením jsme změnili ve všech částech modulu.

A panel module, with paddings and border radius defined using ems — Modul panelu, s polozubením a poloměrem hranice definovaný pomocí EMS

Stejně tak bychom mohli vytvořit malou verzi:

 .Panel - malý {Velikost písma: 0.8rem; }

Uzemžením modulu pomocí velikosti písma na nejvyšší úrovni v REMS jsme to stabilní a předvídatelné. Definováním všeho jiného v rámci používání EMS jsme udělali všechny jeho komponenty škálovatelné.

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — Je možné zakládat velikost vše uvnitř modulu na jedné hodnotě, pak změnit tuto hodnotu, aby se všechno změnil

To je mocný vzor. Tento přístup můžete použít pro cokoliv na stránce, z rozevírací nabídky na tlačítka sociálních médií. Uzemnění modulu s hodnotou REM, pak použijte EM pro prakticky vše ostatní od výcviků do polohování velikosti ikon.

Dělat to reagovat

Pojďme tlačit princip o jednu úroveň dále. Modul jsme rozměli (a teoreticky všechny ostatní moduly na stránce) pomocí REMS a EMS. To nakonec znamená jejich velikost je založena na velikosti písma prvku kořenového prvku. Pak můžeme tuto hodnotu upravit, aby byla celá stránka reagovat na tahu.

Přiveďme se do jiné relativní jednotky: vh. . Vypočítaná hodnota této jednotky je odvozena z velikosti obrazovky uživatele; Je rovna 1% šířky výřezu. Pokud používáme jednotku VH pro definování velikosti kořenového písma, bude automaticky měřítko odpovědnější, sans mediální dotazy. Nastavte velikost písma na kořen 2VW. :

 html {
  Velikost písma: 2VW;
}

Bohužel je efekt je trochu příliš silný. Například na iPhone 6 to bude vypočítat na 5,5px, což je příliš malé. Stejně tak je to nepřiměřeně velký na větších obrazovkách. Chcete-li změkčit efekt, můžeme využít CSS calc () funkce:

 html {
  Velikost písma: Calc (0.6em + 1VW);
}

Velikost písma je nyní odvodit částečně ze stabilní hodnoty a částečně z reagujícího. To vytváří mnohem lepší účinek. . \ T 0.6EM. chová se jako druh minimální velikosti písma. Nyní kořen EM bude měnit fluidně od asi 13px na smartphonu na 21px na průměrné obrazovce pracovní plochy.

S vaší stránkou skládající se z škálovatelných modulů, každý uzemněn hodnotu REM, a oni budou také měřítko s výřezem. Stránka je strukturována s trojstrovou hierarchií; Můžete změnit velikost celé stránky, individuální modul nebo jeden prvek jednoduchým upravením velikosti písma. Důvěřujte EMS a REMS a prohlížeč se postará o práci pro vás.

Pro ovládání balení řádku a některé další citlivé obavy můžete ještě přidat občasný dotaz. Ale tento malý kousek kódu v kombinaci se zvyk používat EMS a REMS vám dostane spoustu cesty.

Tento článek byl původně uváděn v Čistý časopis Vydání 288; koupit to tady

Související články:

10 Typografie triky Každý návrhář by měl vědět
Návrhářský průvodce typografie a fontů
Master Accessible Web typografie

Navrhněte citlivým místem s emisemi na bázi EM

Velikost písma

Budování modulu s EMS

Dynamicky měřítko designu

Dělat to reagovat

jak - Nejoblíbenější články

Použijte Adobe XD pro vytvoření mikro interakcí

Získejte více z Atrage 6: Top tipy pro zvýšení pracovního postupu

Co je uvnitř úhlu 8?

Jak vytvořit tekuté účinky s webglem

Jak malovat realistické vlny ve Photoshopu

4 tipy pro rozvoj vašich vývojářských dovedností

Jak ilustrovat událost

branding klady sdílejí, jak oni oni oni wild značky hlas

Kategorie