HTML中将px转换为em的语法,css – 在Less中将px转换为em

使用LESS,您可以构建自己的功能.我将此函数与grunt-contrib-less包一起使用.格式与通常较少的函数格式略有不同.请注意,您需要在此包中插入less作为参数.

em: function(less,fontsize,basefontsize){

if (less.functions.functionRegistry.get('ispixel')){

basefontsize = (basefontsize) ? basefontsize.value : 16

return fontsize.value/basefontsize+'em';

}

}

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

.class{

font-size:em(16px);

}

哪个会编译到

.class{

font-size:1em;

}

注意ems仍然是相对于容器的css.因此,如果换行div的字体大小设置为0.8em,则1em的字体大小不会是16px.

更新：非grunt-contrib-less版本

如果您将此文件放在javascript文件中,该文件包含在较少文件之前的html中,则可以使用上述功能.

$.extend(less.functions,{

em: function(fontsize,basefontsize){

if (this.ispixel(fontsize)){

basefontsize = (basefontsize) ? basefontsize.value : 16

return new(tree.Dimension)(fontsize.value/basefontsize,'em');

}

}

}