px2rem mixin
The REM
unit is the hottest thing since Christina Ricci ... it's hot. And it's especially hot when it comes to font size. Rather than paraphrase a bunch of documentation as to why REM is important, I'd like to point you to Jonathan Snook's outstanding Font sizing with rem post, where he explains sizing with PX
, EM
, and how REM
comes into the picture. Here's how I implemented REM
sizing within Stylus with a PX
fallback!
REM
单元是最热的东西,因为 克里斯蒂娜·里奇(Christina Ricci) ... 很热。 字体大小特别热。 我想向您介绍Jonathan Snook出色的带有rem post的字体大小,而不是一堆关于REM为什么重要的文档,他在其中解释了PX
, EM
大小以及REM
如何进入图片。 这是我在Stylus中使用PX
后备实现REM
大小调整的方法!
手写笔CSS (The Stylus CSS)
My method uses two mixins to accomplish the feat: one to set the base font-size
and another to rem-ify the pixel unit:
我的方法使用两种混合来实现这一壮举:一种是设置基本font-size
,另一种是重新像素单元大小:
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);
}
}
The 16
within the remify
unit represents the base font size, in pixels, that rems should be calculated by. The usage and output looks as follows:
remify
单元中的16
表示应计算rems的基本字体大小(以像素为单位)。 用法和输出如下所示:
.smaller {
set-font-size(13px);
}
/*
yields:
.smaller {
font-size: 13px;
font-size: .8125rem;
}
*/
Don't forget to set the base font size on the html
element, usually 100%
. Also remember this mixin assumes a PX
font is passed in, so if you aren't looking to use PX
as backup, this isn't the solution for you. If you do, however, there's no hurt in using these Stylus mixins!
不要忘记在html
元素上设置基本字体大小,通常为100%
。 还请记住,此混合是假定传入了PX
字体的,因此,如果您不希望将PX
用作备份,那么这不是您的解决方案。 但是,如果您这样做的话,使用这些Stylus mixins不会有任何伤害!
px2rem mixin