Em jednotka měření html. Síla jednotky em v CSS. Jednotky měření závislé na písmu

Zmínil jsem nové (relativně) měrné jednotky. Tyto jednotky jsou vw, vh, vmin a vmax a jsou založeny na velikosti zobrazované oblasti prohlížeče. Jejich skutečná velikost se mění se změnou výřezu prohlížeče, díky čemuž jsou tyto jednotky ideální pro responzivní design. I když v mém předchozí příspěvek Argumentoval jsem proti použití těchto jednotek k určení velikosti písma, mohou být velmi užitečné pro práci s prvky rozvržení.

Výhledové jednotky

Jednotky měření výřezu jsou relativní jednotky, to znamená, že je nelze objektivně měřit. Jejich velikost je určena velikostí výřezu prohlížeče. S výřezem souvisí čtyři jednotky.

Zaměřím se na první dva, protože jsou nejčastěji používané. V mnoha případech se jednotky výřezu (vh a vw) z hlediska schopností překrývají s procenty. Každý z nich má však své silné a slabé stránky.

Když to shrnu, vypadá to takto:

Při řešení šířky je lepší % a při řešení výšky je lepší vh.

Prvky celé šířky stránky: % > vw

Jak jsem již řekl, vw určuje velikost prvku na základě šířky výřezu. Prohlížeče však vypočítají velikost na základě prostoru pro posuvník.

Pokud šířka stránky přesahuje šířku zobrazované oblasti, zobrazí se posuvník. Ve skutečnosti je však šířka výřezu větší než šířka prvku html

Výřez > html > tělo

Pokud tedy nastavíte šířku prvku na 100vw, prvek bude přesahovat limity html a tělo. PROTI v tomto příkladu Udělal jsem červený okraj kolem prvku html a vyplnil sekce různými barvami.

Kvůli této nuanci je lepší vytvářet prvky přes celou šířku stránky pomocí procent, než se spoléhat na šířku výřezu.

Prvky celé výšky stránky: vh > %

Při vytváření prvků, které musí mít stejnou výšku jako stránka, je mnohem lepší použít místo procent vh. Protože velikost prvku, definovaná v procentech, je relativní k jeho rodičovskému prvku, můžeme získat prvek s výškou rovnou výšce obrazovky pouze v případě, že jeho nadřazený prvek také zabírá celou výšku obrazovky. To znamená, že k tomu musíme umístit prvek jako pevný html prvek rodič, nebo se uchýlit k použití nějakého druhu hacku.

Použití vh k dosažení tohoto efektu je poměrně jednoduché:

Příklad ( výška: 100vh; )

Bez ohledu na to, jak je prvek .example vnořen, lze jeho rozměry nastavit relativně k rozměrům výřezu. Problém posouvání nás nebude obtěžovat, protože většina webů nemá vodorovný posuvník

Zde je několik příkladů použití jednotek vh.

Obrázky na pozadí celé obrazovky

Typické použití jednotky vh je tvořit obrázek na pozadí, který zabírá celou výšku a šířku obrazovky bez ohledu na velikost zařízení. To je docela snadné.

Bg ( pozice: relativní; pozadí: url("bg.jpg") střed/obálka; šířka: 100 %; výška: 100vh; )

Podobným způsobem můžeme vytvořit efekt „stránky“ tím, že každé sekci přidělíme rozměry výřezu.

Sekce ( šířka: 100 %; výška: 100vh; )

K vytvoření iluze otáčení stránek můžeme použít JavaScript.

$("nav").on("click", function() ( if ($(this).hasClass("dolů")) ( var movePos = $(window).scrollTop() + $(window).height (); ) if ($(this).hasClass("up")) ( var movePos = $(window).scrollTop() - $(window).height(); ) $("html, tělo"). animate(( scrollTop: movePos ), 1000 ))

Skládací obrázek

Vh lze také použít k ovládání velikosti obrázku na stránce. Například v rámci článku. Chceme zajistit, aby se jakýkoli obrázek zobrazil celý bez ohledu na velikost obrazovky.

Budeme potřebovat následující kód

Img ( šířka: auto; /* Automatická šířka bude úměrná výšce */ max-width: 100 %; /* Ne větší než šířka nadřazeného prvku */ max-height: 90vh; /* Ne větší než výška výřezu */ okraj: 2rem auto;

Podpora prohlížeče

Protože jsou tyto jednotky relativně nové, stále existují problémy s určitými prohlížeči.

Zde je návod, jak je vyřešit.

Jednotky Rozměry CSS hrát důležitou roli při tvorbě a dimenzování webových stránek různé prvky. CSS hodnoty lze vyjádřit jako pozitivní popř záporná čísla, ačkoli některé vlastnosti přijímají pouze kladná čísla. Číselná hodnota je doprovázena dvoupísmennou zkratkou, která představuje skutečnou jednotku délky. Například cm (centimetry), px (pixely) nebo em CSS. Výjimkou z tohoto pravidla je hodnota 0 (nula), která nevyžaduje jednotku měření.

Jednotky CSS existují ve dvou typech: absolutní a relativní.

Jednotky absolutní délky v CSS

Absolutní CSS jednotky nejsou vhodné pro webdesign. Představují digitální označení výsledků měření v fyzický svět a nezávisí na velikosti a rozlišení obrazovky. Absolutní délky se stejnou hodnotou se mohou lišit o různé obrazovky. To je způsobeno rozdíly v DPI obrazovky (bodů na palec).

Obrazovky s vysokým rozlišením mají vyšší DPI než obrazovky s nižším rozlišením, takže obrázky a text vypadají menší. Absolutní jednotky se používají k definování stylů v tisku, kde se měření vyskytují v palcích, bodech a pica.

Absolutní jednotky délky:

• cm (centimetry);
• mm (milimetry);
• v (palcích);
• pc(špičky);
• pt(body);
• px (pixelů).

Většina absolutní jednotky délky jsou na internetu k ničemu. Jedinou výjimkou je px. Pixely jsou relativní jednotky ve vztahu k rozlišení obrazovek. Pro tiskárny a monitory s velmi vysoké rozlišení jeden pixel v CSS se rovná několika pixelům na obrazovce, takže počet pixelů na palec je kolem 96. Pixel je nejmenší měrná jednotka a běžně se používá jako referenční pro ostatní.

Relativní jednotky délky v CSS

Jednotky relativní délky v CSS nemají pevné hodnoty. Jejich význam závisí na ostatních nastavené hodnoty nebo funkce. Jsou oblíbenější ve webdesignu, protože usnadňují určení velikosti prvku. S jejich pomocí lze nastavit šířku, výšku, velikost písma atd. vzhledem k ostatním základním parametrům.

Relativní jednotky v závislosti na fontu

Relativní jednotky specifické pro písmo jsou uvedeny předem nastavit velikost font nebo hodnota vlastnosti font-family:

• ex(výška znaku x);
• ch( šířka znaku nula (0));
• em jednotka v CSS (aktuální výška písma prvku);
• rem ( velikost písma kořenový prvek ).

např

Definováno jako „ výška znaku x aktuálního písma NEBO polovina 1 em" Tedy výšku malé písmeno x nainstalované písmo. Když změníte hodnotu vlastnosti font-family, změní se jednotka ex.

ch

Rovná se šířce znaku 0. Tato měrná jednotka se také změní, když se změní hodnota vlastnosti font-family.

em

Jednotka CSS em má hodnotu rovnou velikosti písma těla nebo nadřazeného prvku. Pokud je například velikost písma nadřazeného prvku 30 pixelů, hodnota 1 em se vypočítá jako 30 pixelů (30 x 1) pro všechny podřízené prvky. Číslo nemusí být celé číslo. Pokud v příkladu nahradíme 1em 0,5, pak bude hodnota 15px (30 x 0,5).

Jednotka em přebírá hodnotu rodičovská značka. To může vést k nežádoucím výsledkům při použití vnořených prvků.

Řekněme, že máme tři vnořené prvky. První prvek (kořen) má velikost písma 30px a dva vnořené prvky mají velikost písma 2em. Prvek vnořený pod kořenem bude mít velikost písma vypočtenou jako 60px (30 x 2). A prvek v něm vnořený bude mít velikost písma vypočítanou jako 120px (60 x 2).

rem

rem je podobný CSS em , ale jeho význam vždy zůstává stejné velikosti font kořenového prvku. Jednotka rem je užitečná při vývoji responzivních webů, protože umožňuje škálovat celou stránku změnou velikosti písma v prvku HTML.

Procentuální jednotky délky založené na velikosti výřezu

Oblast zobrazení je založena na šířce a výšce výřezu a zahrnuje:

• vh( výška výřezu);
• vw( šířka výřezu);
• vmin( nejmenší z (vw, vh));
• vmax ( největší z (vw, vh)).

vw

Toto je šířka výřezu. 1vw se rovná 1/100 šířky výřezu. Trochu jako procenta, až na to, že hodnota zůstává stejná pro všechny prvky bez ohledu na šířku jejich nadřazených prvků. Pokud je například šířka okna 1000px, pak 1vw se bude rovnat 10px.

vh

Stejné jako vw ( šířka výřezu), pouze tato jednotka měření závisí na výšce pozorovací plochy. 1vh se rovná 1/100 výšky pohledu. Pokud je například výška okna prohlížeče 900 pixelů, pak 1vh bude 9 pixelů.

vmin

Vmin se rovná 1/100 minimální hodnota mezi výškou a šířkou výřezu. Jinými slovy, 1/100 strany s nejkratší délkou. Například pokud jsou rozměry okna 1200 x 800 pixelů, pak bude hodnota vmin 8px.

vmax

vmax se rovná 1/100 maximální hodnota mezi výškou a šířkou výřezu. Jinými slovy, 1/100 strany nejdelší délka. Například pokud byly rozměry 1200 x 800 pixelů, pak vmax je 12px .

% úroku

Vzdálenost určená v procentech závisí na délce nadřazeného prvku. Pokud je například nadřazený prvek široký 1000 pixelů a jeho podřízený prvek je 50 % této hodnoty, pak bude šířka podřízeného prvku 500 pixelů.

PODPORA PROHLÍŽEČE

em CSS, ex, px, cm, mm, in, pt a pc

jsou podporovány ve všech prohlížečích, včetně starších verzí IE.

Vzhledem k běžnému zvyku mezi vývojáři používat hodnoty pixelů si nemyslíme, že každý rozumí skutečnému účelu em parametrů a tomu, jak fungují v CSS.

Při sestavování některých průvodců jsme se s těmito významy nějak museli vypořádat, a tak vám dnes máme co říct. Doufáme, že vám náš dnešní průvodce pomůže odhrnout oponu tak pohodlné a dobře promyšlené techniky určené pro vývoj webových projektů.

Definice em

Specifikace zavádí docela parametr em:

Rovná se vypočítané hodnotě velikosti písma použité na prvek

Jinými slovy, pokud máme následující kód CSS:

prvek (
velikost písma: 20px;
}
To znamená, že 1em nastaveno v tomto prvku nebo v některém z jeho prvků podřízené prvky, bude se rovnat 20 pixelům. .

Pokud použijete následující kód:

prvek (
velikost písma: 20px;
šířka: 4em;
výška: 4em;
}
To znamená, že šířka a výška prvku (zde specifikovaná jako 4em x 4em) bude 80px x 80px (20px * 4 = 80px).

Pojďme se na to blíže podívat

Klíčem k zapamatování je jejich účel a původ tento parametr. Následující:

Em je jednotka změny v tiskárně, která se rovná proudu specifikovaná velikost písmo. Název em je spojen s písmenem M. Tato jednotka byla původně odvozena od šířky velké písmeno M při použití konkrétního písma

Dokumentace pokračuje vysvětlením, že ačkoliv název původně vycházel z šířky písmene M, na tom už nezáleží. Od dnešního dne je jednotka měření em spojena s bodovou velikostí písma.

Použití tato metoda výpočty neprobíhají v souboru CSS přesná definice na to, co em je. Hodnota této jednotky závisí na tom, jak vaše kaskádové tabulky styly. Teoreticky, pokud byste zadali délku všech prvků v jednotce em, pak by samotná změna velikosti písma stačila ke „zničení“ všech vašich pixelů perfektních značek.

Co když nepoužiji parametr font-size?

Ve výše uvedeném příkladu a v JSBin, na který jsme odkazovali, je parametr font-size specifikován přesně. Jednotka em je následně odvozena z parametru „base“. Ale co když prvek není specifikován přesný parametr velikost písma?

V tomto případě, protože parametr font-size se dědí v celém stromu dokumentu, bude hodnota jednotky em odvozena z parametru, který byl zděděn. Pokud se v celém dokumentu nikdy nezmiňuje velikost písma, pak hodnota jedné jednotky em bude 16 pixelů, což je výchozí hodnota (a nemyslíme si, že se to v různých prohlížečích liší).

"rem" by mělo být pro lidi automatické

Je čas přinést nový přírůstek do CSS: . Tato jednotka (název je odvozen od „root em“) je dokonale podporována ve všech prohlížečích: IE9+, FF3.6+, Chrome, Safari 5+ a Opera 11.6+.

Celkově je tato jednotka velmi snadno pochopitelná. Poskytuje vám možnost vytvářet hodnoty jednotek em v celém dokumentu HTML na základě jedné „hlavní“ hodnoty zadané v „ html"-živel. Tímto způsobem můžete zapomenout na parametr font-size, protože všechny jednotky em použité v dokumentu budou založeny na hlavní hodnotě rem, například:

Html (velikost písma: 62,5 %; )
tělo (velikost písma: 1,4rem; ) /* =14px */
h1 (velikost písma: 2,4rem; ) /* =24px */
A stejně jako u em, pokud nezadáte hodnotu velikosti písma v " html", jednotka "root em" bude mít ve výchozím nastavení 16 pixelů.

Carpe di-em

S nimi můžete vymyslet spoustu dalších výrazů :)

Po mnoha letech práce ve vývoji webových stránek můžeme konečně upustit od pevných šířek. I když mnozí již přešli na vývoj adaptivní designy, každý stále čas od času používá hodnoty pixelů. I když to může být dostatečné pro prvky šablony, myslíme si, že je to typografie, kterou je třeba plně převést na hodnoty em.

I když můžeme tvořit celá šablona pomocí jednotek em se nám zdá, že v adaptivní šablony stále je lepší používat hodnoty pixelů a procento a jak již bylo uvedeno, použijte je pro typografii.

Doufáme tedy, že se vám náš dnešní tutoriál líbil a vložili do něj to, co jste se naučili používat.

Nezapomeňte komentovat!

Jeden z nejvíce matoucích aspektů CSS je aplikace velikost písma atribut pro změnu měřítka textu. Pomocí CSS můžete změnit velikost textu v prohlížeči pomocí čtyř různé jednotky měření. Která z těchto čtyř jednotek je pro web nejlepší? To je otázka, která vyvolala různé diskuse a kritiku. Najít definitivní odpověď je obtížné, protože samotná otázka je složitá.

Seznamte se s jednotkami

1. "Ems" (em): "em" je škálovatelná jednotka, která se používá ve webových dokumentech. "em" se rovná aktuální velikosti písma, například pokud je velikost písma v dokumentu 12pt, 1em se rovná 12pt. "em" je přirozeně škálovatelné, takže 2em se bude rovnat 24pt, 0,5em se bude rovnat 6pt atd. Použití „em“ se ve webových dokumentech stává stále populárnějším kvůli jeho škálovatelnosti a schopnosti být užitečně použito mobilní zařízeníÓ.
2. Pixely (px): "px" mají pevná velikost jednotky, které se používají na obrazovkách (například pro čtení na obrazovce počítače). Jeden pixel se rovná jednomu bodu na obrazovce vašeho počítače (nejmenší prvek rozlišení vaší obrazovky). Mnoho webových designérů používá px ve webových dokumentech k dosažení dokonalé reprezentace svého webu při zobrazení v prohlížeči v pixelech. Jedním z problémů při používání px je, že tyto jednotky neumožňují škálování pro zrakově postižené čtenáře nebo mobilní zařízení.
3. Body (pt): "pt", tradičně používané v tištěných médiích (cokoli, co je třeba vytisknout na papír atd.). Jeden "pt" se rovná 1/72 palce. "pt", stejně jako "px", mají pevnou velikost jednotek a nelze je měnit.
4. Procenta (%): Jednotky % jsou až na pár výjimek podobné "em". zásadní rozdíly. Za prvé, aktuální velikost písma je 100 % (tj. 12 bodů = 100 %). Použitím "%" se váš text stane plně škálovatelným pro mobilní zařízení a uživatelskou přívětivostí (dostupnost).

Jaký je tedy rozdíl?

Jakmile je uvidíte v akci, bude snadné pochopit rozdíl mezi jednotkami velikosti písma. Obvykle 1 m = 12 bodů = 16 pixelů = 100 %. Při použití těchto velikostí písma se podívejme, co se stane, když zvětšíte základní velikost písmo (pomocí CSS selektory tělo) od 100 % do 120 %.

Změna velikosti písma ze 100 % na 120 %.

Jak můžete vidět, "em" a "%" zvětšily velikost písma, zatímco "px" a "pt" ne. Nastavení absolutní velikosti textu může být snadné, ale pro vaše návštěvníky je mnohem lepší použít škálovatelný text, který lze zobrazit na jakémkoli zařízení nebo počítači. Z tohoto důvodu je pro text webového dokumentu vhodnější používat jednotky "em" a "%".

"em" vs "%"

Zjistili jsme, že jednotky „px“ a „pt“ nejsou tím nejlepším možným způsobem jsou vhodné pro webové dokumenty, což nás nutí používat "em" a "%". Teoreticky jsou jednotky "em" a "%" totožné, ale v praxi mají drobné rozdíly, které je důležité vzít v úvahu.

Ve výše uvedeném příkladu jsme jako základní jednotku velikosti písma použili procenta (ve značce body). Pokud změníte základní jednotku velikosti písma z „%“ na „em“ (tj. tělo (velikost písma: 1em;)), by měl nevnímej rozdíl. Podívejme se, co se stane, když je "1em" naší základní jednotkou a když klient změní "Velikost písma" v nastavení prohlížeče (mnoho prohlížečů, jako je Internet Explorer, má tuto možnost).

Velikost písma, když klient změní velikost textu v prohlížeči.

Když je velikost textu klientského prohlížeče nastavena na „střední“, není mezi „em“ a „%“ žádný znatelný rozdíl. Pokud se však parametr změní, rozdíl bude velmi velký. Při nastavení na „Nejmenší“ je „em“ mnohem menší než „%“ a při nastavení na „Největší“ je naopak „em“ zobrazeno mnohem větší než „%“. A zatímco mnozí tvrdí, že jednotky v "em" měřítko, jak bylo zamýšleno, v praxi se text v "em" měří příliš dramaticky, což způsobuje, že nejmenší text je na některých počítačích nečitelný.

Výrok

Teoreticky jsou jednotky „em“ novým a připravovaným standardem velikosti písma na webu, ale v praxi jednotky „%“ umožňují uživatelům zobrazovat text konzistentněji a pohodlněji. Při změně parametrů klienta se text v "%" měnil v rozumných proporcích, což umožňuje návrhářům zachovat čitelnost, přístupnost a design.

Vítěz: procenta (%).

Jeden článek není nutný.

1px (pixel)= 1/96 palce, ale ne v CSS. 1 pixel v CSS je bod na obrazovce uživatele, fyzikální veličina což závisí na rozlišení zařízení a na vzdálenosti, ze které se člověk dívá na jeho povrch ( mobilní telefon nebo TV). Bez ohledu na měrné jednotky, ve kterých kód zapíšeme, je zmenšen na px.

1 m= hodnota velikosti nadřazeného písma. Vezměte prosím na vědomí, že v polygonu níže je velikost písma žlutého a hnědého bloku odlišná, ale velikost písma je stejná.

16px * 1 = 16px // žlutá 16px * 0,5 = 8px // zelená 8px * 2 = 16px // hnědá

1 rem= hodnota velikosti písma (kořenový prvek dokumentu).

16px * 1 = 16px // žlutá 16px * 0,5 = 8px // zelená 16px * 2 = 32px // hnědá

1 procento (1 %)— hodnota relativní k hodnotě vlastnosti nadřazeného tagu.

16px * 100% = 16px // žlutá 16px * 50% = 8px // zelená 8px * 200% = 16px // hnědá

Když se zmenší šířka nadřazeného prvku, zmenší se také šířka prvku, nikoli však jeho písmo.

1vw= 1 % šířky okna. Při zmenšení šířky okna se zmenší šířka, výška a písmo prvku. Při stisknutí Ctrl + nebo Ctrl - se velikost písma nezmění.

1vh= 1 % výšky okna. Při zmenšení výšky okna se zmenší šířka, výška a písmo prvku. Při stisknutí Ctrl + nebo Ctrl - se velikost písma nezmění.

1vmin= 1vw nebo 1vh. Vybere se ten, který je menší.

1vmax= 1vw nebo 1vh. Vybere se ten, který je větší.

font-size: 16px 100% 1em 1vw 1vh 1vmin 1vmax 1rem ;

font-size: 8px 50% .5em .5vw .5vh .5vmin .5vmax .5rem ;

font-size: 32px 200% 2em 2vw 2vh 2vmin 2vmax 2rem ;

funkce calc().

Chtěli jste někdy odečíst pixely nebo ems od procent? Například proto, aby. Nyní je to možné. Funkce calc() umožňuje implementovat matematické výrazy

Sčítání (znak oddělený mezerami na obou stranách) - odčítání (znak oddělený mezerami na obou stranách) * násobení / dělení

Zde je další skvělý příklad.

• 1
• 2
• 3
• 4