根据根字体大小模拟 CSS 中的“相对像素”

Question

据我所知，CSS中还没有“相对像素”这样的东西。 （

1 relative pixel == 1px

，如果

1rem == 16px

，或者按比例更改，如果不是）。

我正在寻找一种模仿这些单位的表达方式。

到目前为止，我见过的最好的镜头是使用更少：

@font-size: 16;
@rem: @font-size*1rem;

h1
{
  font-size: 20/@rem;
}

/@

作为前缀看起来非常简洁，意思是“相对像素为”[rem]（当然这只是一个除法运算）。但它需要 LESS 预处理器。

由于重复

calc(20rem / 16)

 和 

calc

，

16

似乎有点冗长。

2025 年还有其他方法来模拟这些单位吗？

Answer 1

我最终得到了一个 LESS 插件。

less-lib.js

：

registerPlugin(
    {
        install: function (less, pluginManager, functions)
        {
            functions.add('rp', function (rpx)
            {
                return new tree.Dimension(rpx.value / 16, 'rem');
            });
        }
    }
)

使用：

@plugin "less-lib";
.my-class
{
    width: rp(20);
}