在Less中将px转换为em [英] Convert px to em in Less

问题描述

在小于 emCalc（）的等价物是什么？

What is the equivalent of Scss' emCalc() in less?

padding: emCalc(24px);

将根据视点和缩放级别计算em。有更少的内置函数吗？

in Scss will calculate em based on the viewpoint and zoom level. Is there any built-in function in less?

推荐答案

借助LESS，您可以构建自己的函数。我使用这个函数与grunt-contrib-less包。格式化与通常的较少功能格式稍有不同。注意，您需要在此包中插入较少的参数作为参数。

With LESS you can build your own functions. I use this function with the grunt-contrib-less package. The formatting is slightly different from the usual less functions formatting. Note you need to insert less as a parameter with this package.

em: function(less, fontsize, basefontsize){
    if (less.functions.functionRegistry.get('ispixel')){
        basefontsize = (basefontsize) ? basefontsize.value : 16
        return fontsize.value/basefontsize+'em';
    }
}

现在你可以在你的LESS样式表中调用这个函数as

Now you can just call this function in your LESS stylesheets as

.class{
    font-size:em(16px);
}

这将编译为

.class{
    font-size:1em;
}

注意ems仍然是相对于容器的css。因此，如果包装div的字体大小设置为0.8em，那么1em的字体大小不会是16px。

Note ems will still be relative to the container's css. So the font-size of 1em will not be 16px if the wrapping div has a font-size set of 0.8em for example.

更新： grunt-contrib-less版本

如果你把这个文件放在你的html文件中的javascript文件中，如上所述。

If you put this in a javascript file which you include in your html before your less file, you can use the function as stated above.

$.extend(less.functions, {
    em: function(fontsize, basefontsize){
        if (this.ispixel(fontsize)){
            basefontsize = (basefontsize) ? basefontsize.value : 16
            return new(tree.Dimension)(fontsize.value/basefontsize,'em');
        }
    }
}

这篇关于在Less中将px转换为em的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！