自定义 CSS 单位的利器

前文

很多时候我们很想要一个能够自定义 CSS 单位的东西，比如下面这种情况

UI 妹子给的图总是 px 单位的，但是我们做移动端的时候很多时候是想要 rem 的，这时候我们会手动计算从 px 到 rem。
假如你计算的是 rem = px / 100，通常情况下，可能我们每次都需要从 UI 稿除以 100 写在代码里面。比如UI 稿给的是 1.5px 那我们需要在代码里写上0.015rem。

现有的插件

这样十分的不优雅。但是现在到处都是一些单位换算工具，比如 vscode 就有一些单位换算工具，它能够在你编辑代码的时候约束你，帮你自动计算，它依赖于 VSCode 的 language service，缺点很明显了，一旦你脱离了 VSCode，啥也没了。

除此之外，现在还有很多类似 px 2 rem，rem 2 vw 等等这样的插件，这种插件存在的问题是，存在单位的限制，它只能从 xx 到 xx 的转换，第二个严重的问题是存在对原有单位的污染，如果使用了 px 2 rem ，那么你的整个应用中都不能使用 px 了，因为 px 都会被转成 rem，这样的问题是很大的，很多时候用户会使用 平板 来访问你的应用，如果整个应用都是 rem，那好了，多大的平板就有多大的字，这是不对的，用户用更大的移动设备是想看到更多的内容而不是更大的字，因此多单位共存是很重要的。

Postcss-Relaxed-Unit

这是今天的主角了。它的作用很单纯，就是自定义单位到目标单位的计算输出。

e.g.

postcss: {
   
      plugins