Question

我有一个CSS文件，在这里我们使用px作为单位。由于我们的项目范围发生变化，我们需要在移动设备上对网站做出响应，因此我们应该将font-size和line-height转换为em，我们现在正在手动执行此操作。

是否有任何sublime插件或任何其他工具仅将font-size和line-height转换为em，而不包括padding等内容？

Answer 1

不是，但你可以使用RegEx find-replace。但这并未考虑尺寸变化。您可以使用rem-calc()并假设您的CSS格式正确，您可以执行以下操作：

查找

(font-size: )(\d+(.\d+)?)px

替换：

${1}rem-calc(${2})

Answer 2

试试这个代码段：

var regFindPX = new RegExp('(\\d+)px','g');
var reg3decPoints = new RegExp('(\.\\d{3}).*', '');

var css = 'css code';
var result;
while ((result = regFindPX.exec(css)) !== null) {
    var px = parseInt(result[1]);
    var em = px / 16;
    em = em.toString().replace(reg3decPoints, '$1');
    css = css.replace(px + 'px', em + 'em'); 

}

Answer 3

如果您熟悉PostCss（https://github.com/postcss/postcss），您可以利用https://www.npmjs.com/package/postcss-px-to-em或https://github.com/cuth/postcss-pxtorem

等插件

将px中的所有字体大小和行高转换为来自css文件的em

3 个答案: