REM
jednotka je nejžhavější věc od Christiny Ricci ... je horko. A obzvlášť žhavé je to u velikosti písma. Spíše než parafrázovat spoustu dokumentace o tom, proč je REM důležité, bych vás rád upozornil na vynikající velikost písma Jonathana Snooka pomocí příspěvku rem, kde vysvětluje velikost pomocí PX
, EM
a jak REM
přichází do obrazu. Zde je návod, jak jsem implementoval REM
velikost v rámci stylusu s PX
záložní!
Stylus CSS
Moje metoda používá dva mixiny k dosažení tohoto výkonu:jeden k nastavení základu font-size
a další pro přepracování pixelové jednotky:
set-font-size(value) { font-size: value; /* add PX (or original value) as backup */ if (value is inherit) { /* do nothing, "inherit" has no unit */ } else { font-size: remify(value); } } remify(value) { /* separate mixin, so it can be used elsewhere */ u = unit(value); if (u is 'px') { return unit(value/16, 'rem'); } else { return unit(value, u); } }
16
v rámci remify
jednotka představuje základní velikost písma v pixelech, podle které by se měly rems vypočítat. Použití a výstup vypadá následovně:
.smaller { set-font-size(13px); } /* yields: .smaller { font-size: 13px; font-size: .8125rem; } */
Nezapomeňte nastavit základní velikost písma na html
prvek, obvykle 100%
. Pamatujte také, že tento mixin předpokládá PX
font je předán, takže pokud nechcete použít PX
jako záloha to pro vás není řešení. Pokud to však uděláte, používání těchto stylových mixů vám neublíží!