px2rem mixin_手写笔PX转REM Mixin

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不会有任何伤害！

翻译自: https://davidwalsh.name/stylus-rem

px2rem mixin