V pravidlách CSS sa používajú dve varianty meracích jednotiek: absolútne a relatívne. Spočiatku bola známa iba jedna absolútna jednotka merania - pixel. Jeho veľkosť závisí od matice alebo monitora a bolo ľahké ho vypočítať samostatne.
Nevýhody používania pixelov
Pre vydavateľov pracujúcich na médiách je na stránke dôležité zdôrazniť obsah samotný. Mal by byť čitateľný, s optimálnou dĺžkou linky a dostatočnou veľkosťou, takže aj používateľ s nízkou viditeľnosťou by mohol pohodlne vnímať text. Nezáleží na tom, ktoré zariadenie používateľ číta článok a ako je dobré - je dôležité, aby pochopil obsah článku bez špeciálnych gadgetov. Pri používaní pixelov v rozložení často dochádza k zmenšeniu počtu slov v zostupnom riadku, dochádza k nepríjemným prechodom textu alebo k tomu, že obsah je z kontajnera úplne vynechaný. Preto sa začali používať weboví vývojári a dizajnéri pri písaní kódových percent a relatívnych meracích jednotiek, ako sú EM, REM. Ale stále nemohli úplne tlačiť pixely.
História vzhľadu relatívnych jednotiek
Keďže prvé stránky vo väčšine prehliadačov neboli zmenené, pixely na dlhú dobu zostali jedinou možnosťou na popis veľkosti písma. Ale s rozvojom webových technológií sa objavila potreba vytvárať nové jednotky merania. Existovali teda EM a% a potom REM, ktorých hodnoty boli viazané na štandardy prehliadačov a zvyčajne sa rovnali16 pixelov Existuje empirické pravidlo, ktoré kombinuje základné veľkosti písma: 100% = 1 em ~ 16px ~ 14pt. To znamená, že ak nezmeníte veľkosť písma v žiadnych podradených prvkoch, štandardne v prehliadači bude asi 16 pixelov a asi 14pt (typografický bod), ale vždy 100% a 1 em.
Použitie relatívnych meracích jednotiek uľahčujúcich usporiadanie, ktoré robia modulárne prvky zvládnuteľnými. Moderná technológia vyžaduje, aby sa zmenšovanie veľkosti prvkov na stránkach líšilo vo veľkosti v závislosti od obrazovky s povolením alebo z okna prehliadača používateľa. Preto sa EM a REM v CSS stali nepostrádateľným pomocníkom pri vytváraní stránok, ktoré vyžadujú prispôsobivé veľkosti písma. Väčšina prehliadačov nemá v súčasnosti problémy so zmenšovaním textu a ich správanie so zvyšovaním alebo zmenšovaním veľkosti písma je v súlade s ostatnými. Ale akékoľvek rozloženie by sa malo skontrolovať v niekoľkých prehliadačoch, vrátane tých, ktoré sú zastarané, aby ste pochopili, ako bude vyzerať koncový výsledok pre rôznych používateľov.
Použitie relatívnych jednotiek
Relatívne jednotky merania, také bežné v typografii a CSS, - EM a REM, sú priemerným používateľom menej známe než pixely. Nie každý začiatočník dizajnér alebo plánovač rozumie ich účelu a používa ho správne. Medzi profesionálnymi dizajnérmi stále existujú spory, keď je lepšie používať jednu alebo druhú jednotku. Napriek tomu relatívne jednotky značne uľahčujú citlivé rozloženie a považujú sa za najúčinnejšiu metódu pri konštrukcii modulárnych komponentov. EM a REMsa používajú na určenie veľkosti rôznych prvkov - hlavičky, okraje, rámčeky. Ale ich rozmery sú vypočítané rozdielne.
Čo je EM
EM je relatívna jednotka merania, ktorá závisí od veľkosti písma rodičovského elementu. Často je predpísané v pravidle CSS pre značku tela. Táto značka definuje parametre všetkých prvkov na stránke. Ako rozumieť EM jednotkám v CSS a vypočítať ich hodnoty? Všetko je dosť jednoduché. Ak je veľkosť písma (tj veľkosť písma) voliča tela 10 pixelov, 1 EM je tiež 10 pixelov, to znamená, že nastavovač špecifikuje hodnotu tejto jednotky samostatne. V dôsledku toho budú všetky ostatné dimenzie uvedené v EM vypočítané na základe tejto hodnoty. Texty, ktorých parametre sú nastavené v pixeloch av relatívnych jednotkách, sa nemusia líšiť vizuálne, kým sa nemusia meniť. Ale sú veľmi výhodné pri vytváraní flexibilných modulárnych blokov. Ak nenastavíte veľkosť písma, ale použijete v kóde relatívne jednotky, budú predvolene vypočítané a 1 EM bude 16 pixelov.
Vlastnosti jednotky merania EM
Pri použití relatívnych meracích jednotiek EM existuje iná funkcia. Ak je veľkosť písma v prepínači nastavená na 2 EM, potom pri použití EM v parametroch pre inú vlastnosť v tom istom voliči bude hodnota tejto jednotky použitá inak. V dôsledku toho sa veľkosť prvku zdvojnásobí. Parametre EM sú vypočítané na základe veľkosti písma v konkrétnom bloku. To znamená, že ak veľkosť písma selektora odseku (značka "p") sa rovná 2 EM a pretelo, to je 10 pixlov, potom pri pridaní k selektoru p veľkosť vonkajšieho okraja textu ("okraj") v hrúbke 1 EM sa bude rovnať 10 a 20 pixelom.
Aby ste získali veľkosť písma rovnú 10 pixelom, musíte použiť 05 EM. Takéto zmeny hodnôt v rôznych častiach kódu sú často zamieňané začínajúcimi remeselníkmi. Pri používaní EM v systéme CSS sa vyskytol problém - pri nastavení veľkosti písma 0875 EM bol každý následne pripojený prvok zmenšený. Nežiaduce účinky spôsobili používanie tejto jednotky a spodný okraj. V tomto prípade veľkosť písma ovplyvnila polia okolo prvku, rovnako ako v EM priamo súvisiacich s týmto parametrom blokového modelu.
REM merania v CSS
Teraz sa pozrime na to, čo je jednotka merania REM a ako ju používať. Prvá zmienka o REM sa objavila v roku 2011 v komentári k článku nemeckého vývojára Gerrita van Aakena o použití pixelov v kóde CSS. Táto relatívna jednotka sa nachádza v blízkosti hodnoty EM a jej názov sa prekladá ako "root EM" alebo "root". REM správanie je predvídateľnejšie. Použitie tejto jednotky v usporiadaní umožňuje ľahko vypočítať veľkosť prvkov v rôznych častiach kódu, pretože hodnota REM v CSS sa rovná hodnote veľkosti písma nastavenej pre prvok koreňa, značku HTML. Ale častejšie sa táto hodnota pridáva aj do tela, aby sa vylúčili chyby výpočtu. Použitie REM v CSS, ak jeho hodnota nie je zapísaná v tagu HTML, je ešte jednoduchšia. 1 REM sa bude rovnať štandardným 16 pixelom, ako v prípade EM, ktorého hodnota nie je nastavená.
Spory opoužite REM v CSS. REM vs. EM
REM a EM majú svoje pluses a mínusy. Medzi obsluhujúcimi osobami existuje veľa diskusií, ktoré sa vzťahujú na meraciu jednotku pri písaní kódu. Predpokladá sa, že použitie REM v CSS robí rozloženie menej modulárne a EM komplikuje rozloženie a vyžaduje starostlivý prístup a výpočty. Každý inštalatér v procese práce sám vyberá pre seba, ktorú jednotku merania a kde sa má uplatniť. Ale v počiatočnej fáze sú pixely stále lepšie. EM je lepšie pre položky, ktorých vlastnosti sú zmenšené na základe veľkosti písma. V iných prípadoch je REM vhodnejší.
Použitie REM v hlavičkách
Zvážme, ako sa hlavičky textu (tagy h1-h6) zmení, ak sú zapísané v REM. Predpokladajme, že hlavička obsahuje polia okolo nej - polstrovanie, pozadie a zadanú veľkosť písma. Ak chcete zvýšiť titul, priestor medzi okrajmi prvku sa zníži, takže polstrovanie sa musí prekonať. Ale potom je problém so skutočnosťou, že všetky prvky jednoducho prestávajú byť obsiahnuté na stránke. Ale je tu nastavená veľkosť písma v pixeloch, a potom v nastavení prehliadača sa pokúsiť zmeniť ho na väčšiu, nič sa nestane. Pri použití REM sa zvýši a zníži v závislosti od používateľských preferencií.
Obmedzenia na Root Em
REM pomáha vytvárať kaskádové tabuľky s rôznymi veľkosťami písma pre nadpisy a odseky. Veľko zjednodušuje rozloženie, pretože nie je potrebné úplne zmeniť kód - stačí opraviť veľkosť písma v značke html. Existuje tiež obmedzenie používania tejto jednotky. V starších verziách prehliadačov Opera a IE aNiektoré prehliadače systému Android ešte nie sú podporované. Preto sú vývojári nútení používať pixely ako záložnú voľbu a zapisovať dvojitý kód. Moderné prehliadače čítajú riadky s veľkosťou písma v pixeloch a prekladajú ich do REM a zastaralé jednoducho nezobrazia kód s neznámou jednotkou merania. Ale ak ste na to zabudli a začali vyvíjať stránky pre určitú obrazovku, potom môžete stratiť veľa používateľov, ktorí jednoducho nemôžu prijať obsah, prerušený pomocou REM alebo EM.
Nové spôsoby určenia veľkosti textu
Zoznam veľkostí CSS teraz zahŕňa nielen možnosti uvedené vyššie. K dispozícii boli nové položky:
VW - sa rovná 1/100 šírke prehliadača. VMIN - 1/100 menšia strana okna prehliadača. VMAX - 1/100 na väčšej strane okna prehliadača. VH - sa rovná 1/100 dĺžke prehliadača. EX - V závislosti od výšky písmena "x" v malých písmenách. CH - sa vypočítava v závislosti od symbolu "0" v písme aktuálneho prvku.Väčšina z týchto možností sa používa aj na vytvorenie flexibilného rozloženia stránok, kde sa veľkosť nádoby meria v závislosti od veľkosti okna prehliadača. Ale pre pohodlné prispôsobenie stránky je zvyčajne dosť EM alebo REM.
