px2rem mixin_手写笔PX转REM Mixin

亦凉 2023-02-22 03:47 5阅读 0赞

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][Font sizing with rem] post的[字体大小，][Font sizing with rem]而不是一堆关于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][https_davidwalsh.name_stylus-rem]

px2rem mixin

[Font sizing with rem]: http://snook.ca/archives/html_and_css/font-size-with-rem
[https_davidwalsh.name_stylus-rem]: https://davidwalsh.name/stylus-rem