Existuje mnoho spôsobov, ako prispôsobiť veľkosť písma CSS. Značná časť spracovateľov stále používa pixely, ale to nie je celkom správny prístup. Tento pixel je veľmi jednoduchá voľba, ktorá nie je vždy vhodná na prispôsobenie rozloženia stránky. Zvážte všetky existujúce metódy na zmenu veľkosti písma CSS.

Aká je táto "veľkosť písma" vo všeobecnosti?

Predpokladá sa, že veľkosť sa vzťahuje na hodnotu najväčšieho znaku špecifikovaného písma. To nie je pravda. V skutočnosti je hodnota vložená do písma a meranie je ručne, s pravítkom, je nepravdepodobné, že sa ukáže. Typicky je veľkosť mierne väčšia ako vzdialenosť od hornej časti veľkého písmena k dolnej časti najmenšieho písmena. To je vykonané tak, aby každá kombinácia znakov mohla byť v danom priestore. Je tiež dôležité špecifikovať parameter "line-height", inak môžu písmená p, q a podobne prekračovať hranice.

Pixely

Najbežnejšia verzia. Inštaluje sa takto: font-size: 16px; Výhoda pixelov je len jedna vec - bez problémov s veľkosťou. Nemá sa počítať. Ktorá veľkosť je označená, budú znaky na obrazovke. Nevýhodou je problém s prispôsobivou veľkosťou písma CSS. Nebude možné vytvoriť vzťah medzi rôznymi veľkosťami. Medzi "pixel" možno pripísať zastarané jednotky merania. Patria medzi ne PC, cm, mm a pt. Áno, mm je milimetr, cm je centimeter. Pt a pc - typografický bod a typografický vrchol. Prečo sú tieto metódy zastarané? Pretože neboli "nezávislé" - prehliadačAutomaticky spočítané hodnoty v pixeloch. Preto boli problémy rovnaké ako v prípade px. Mimochodom, v jednom cm od pohľadu prehliadača obsahuje 38 px.

Em: hodnota závisí od veľkosti písma nadradeného prvku

Všetko je jednoduché. Predpokladajme napríklad, že máte div, pre ktorý je špecifikovaná veľkosť písma 16px. Existuje ďalšia div, v ktorej je veľkosť písma CSS nastavená na hodnotu 2EM. Preto 1em - to bude 16px (to je veľkosť písma rodičovského elementu) a 2em - dvakrát, to znamená 32px.

Môžete tiež nastaviť hodnotu em v nadradenom prvku. V tomto prípade bude závisieť od veľkosti základne uvedenej v tele alebo html. Em je relatívna veľkosť písma CSS, ktorá sa zvýši a zníži spolu s veľkosťou znakov nadradeného prvku. To je vhodné - ak chcete zmeniť veľkosť na veľkom počte miest, stačí zmeniť parametre rodičov.

Pre odborníkov: ex a ch

Prakticky nepoužívajú bežní pracovníci a vývojári frontend. Ex je hodnota znaku "X" a ch je znak "0". Zvolené písmo nemusí mať takéto znaky, ale možnosti sa môžu stále používať. Určite nie je známe, v akých prípadoch sú také rozmery najvhodnejšie. Skúste experimentovať - ​​možno to bude pre vás lepšie? Pamätajte však, že ex a ch sú "podmienené" jednotky, takže jemné nastavenie parametrov bude ťažké.

Percento: najviac nehmotná možnosť

Ako nastaviť veľkosť písma v CSS ako percento? Zdá sa, že všetko je jednoduché - stačí len špecifikovať požadovanú možnosť a po nej umiestniť symbol "%". Ale tu jenastane dôležitá otázka: "Aké percento veľkosti bude dané?"
Vo väčšine prípadov sa parameter vypočítava v závislosti od veľkosti rodičov, ale nie vždy. Ak nastavíte vlastnosť margin-left, percento sa vypočíta v závislosti od šírky základného bloku. Ak nastavíte výšku čiary, percento sa použije v závislosti od aktuálnej veľkosti písma. Nastavenie parametrov v percentách vyžaduje starostlivé experimenty. Dávajte pozor na túto jednotku, pretože môže ľahko zmeniť vzhľad vašej dispozície.

Rem: Jednoduchá a univerzálna jednotka

Hore je zoznam mnohých spôsobov prispôsobenia veľkosti písma v CSS, ale žiadny z nich nie je vhodný. Pre zjednodušenie práce bol vypočítaný parameter rem, ktorý sa vypočítava v závislosti od veľkosti značky špecifikovanej pre html. To je jednoduchšie, ako sa zdá na prvý pohľad. Napríklad pre html tag, ktorý obalil celý obsah stránky, nastavíte ju vo veľkosti písma CSS 16px. Preto bude 1rem teraz 16px. 2rem je 32 pixelov atď Môžete použiť ľubovoľný pomer strán: 02 rem, 11 rem, 100rem Prehliadač bude presne zobrazovať parametre.

V html sa nemôžete nič dotknúť, pretože samotné prehliadače nastavujú určitú veľkosť písma pre obal. Ale pre dôkladnejšie nastavenie je najlepšie definovať skóre. Hlavnou výhodou rem je, že môžete ľahko prispôsobiť písma konkrétnemu umiestneniu bez ovplyvnenia ostatných prvkov. Pamätajte však, že staršie IE prehliadače pod verziou 9) nepodporujú túto metriku.

Vw a vh: exotické parametre

Najnovšie jednotkymerania vykonané pre mobilné zariadenia. Vw je 1% šírky okna, v ktorej používateľ prezerá vaše stránky. Vh - 1% jeho výšky. Hodnoty znakov sa automaticky zmenia v závislosti od obrazovky návštevníka. Ak chcete zvoliť vhodnú veľkosť pri rozložení, zväčšenie a zmenšenie veľkosti obrazovky.

Zhrňujme

Už dlhú dobu nemôžete nastaviť veľkosť písma CSS len v px. Je oveľa pohodlnejšie používať rem, vh a vw (najmä pre adaptívny dizajn), rovnako ako em. Každá z týchto možností má svoje výhody a nevýhody, preto skontrolovať niekoľko metód pred použitím. Moderné spracovatelia sa často uchýlia k rem, pretože to je jeden z najjednoduchších spôsobov, ako zmeniť veľkosť písma. Má však nevýhodu - komponenty sa stávajú menej modulárnymi. Odporúča sa dodržiavať 2 pravidlá:

ak sa majú vlastnosti zmenšiť podľa veľkosti písma, bude preferovanou voľbou em;

V ostatných prípadoch sa odporúča použiť re.

Em sa často používa na nastavenie rozmerov výplne a okrajov. Buďte opatrní, ak v ňom zadáte hodnotu znakov pre zoznamy, pretože kvôli veľkej obálke môžu byť znaky skreslené.