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

Question

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

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

Answer 1

不一定，但您可以使用 RegEx 查找替换。但这没有考虑尺寸变化。您可以使用 rem-calc() 并假设您的 CSS 格式正确，您可以这样做：

查找：

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

替换：

rem-calc()

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, '');
    css = css.replace(px + 'px', em + 'em'); 

}

Answer 3

如果您熟悉 PostCss (https://github.com/postcss/postcss ) you could take advantage of some plugins like https://www.npmjs.com/package/postcss-px-to-em or https://github.com/cuth/postcss-pxtorem

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

Convert all font-size and line height in px to em from css file

jquery

css

html

sass

sublimetext2