Question

任何人都知道将样式表从px转换为em的脚本（php，python，perl，bash等）

喜欢，它需要输入文件名和基本字体大小（默认为16）并将所有px实例转换为em？

例如：

convertpx2ems --file stylesheet.css --base-font-size 16

将转换为：

button {
    font-size:14px;
    padding:8px 19px 9px;
}

这样的事情：

button {
    font-size: .875em;
    padding: .5em 1.188em .563em;
}

......也许，有没有办法用sass做到这一点？

Answer 1

将您的CSS复制/粘贴到JSFiddle进行转换。代码示例：

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 2

你不能明智地互换像这样的px和em大小。 px大小是绝对值，无论它在何处，都将保持相同的大小。 em大小相对于父元素，因此0.5em是父元素大小的一半。如果这没有多大意义，请考虑以下代码：

/* CSS */
span { font-size: 0.9em; }

<!-- HTML -->
<span>Testing,
    <span>Testing,
        <span>Testing</span>
    </span>
</span>

在这个例子中，你会发现“测试”这个词越来越小，因为每个span标签的字体大小是上面一个的90％。

对于body标签，1em的字体大小大致相当于16px，但这是唯一一次可以合理地将一种尺寸翻译成另一种尺寸

Answer 3

你可以在Perl中轻松完成：

perl -p -i -e 's/(\d+)px/($1\/16).em/ge' stylesheet.css

Answer 4

我用awk敲了这个：

#!/bin/awk -f

BEGIN {
    bfs = 16;
}

{
    while (match($0, /([0-9]+\.)?[0-9]+px/)) {
        num = substr($0, RSTART, RLENGTH - 2);
        #print("numval: ", numval);
        $0 = substr($0, 1, RSTART-1) (num != 0 ? (1 / bfs) * num: 0 ) "em" substr($0, RSTART + RLENGTH);
  }
}

1

您可以使用它来替换文件中具有适当转换的任何px条目。请注意，bfs必须设置为您希望使用的基本字体大小（在本例中为16）。另请注意，您必须具备一些shell技能才能正确使用它。

Answer 5

我意识到这是一个旧线程，但我认为这可能对某人有所帮助：

将px转换为em： target÷context = result

例如：

找到1px＆amp;的价值假设容器的字体大小是16px，方程式如下：

1÷16 = 0.0625~

（最好是四舍五入到最接近千分之一。）

1px = 0.063em

由此您还可以通过目标* em_value = result

找到其他测量值

<强>实施例

10 * .063 = .63

10px = .63em

我希望这是有道理的＆amp;帮助某人。

Answer 6

正如詹姆斯所指出的，任何直接转换器的问题是样式表不知道哪些元素是嵌套的。由于em值是相对的，因此计算出的font-size将在重度嵌套元素中发生变化。您需要一个工具在渲染后扫描HTML输出，并递归调整相关样式。

我已经编写了一个可以证明在这方面有用的JavaScript组件。你可以抓住它here。

建议的工作流程是在浏览器中调用emify(document.body)，然后提取相关的em值并将其重新注入css。

不理想，但这是一种准确的做法。

Answer 7

从前面的讨论看，好像没有在线生成器，对吧？我肯定找不到一个会解析整个样式表的人。

首先，如果将em应用于图像或输入，除了输入内的字体外，它们是相对的，如果是，那么它是什么以及如何？图像不能嵌套，我很难看到它们相对于每个父div宽度。（为了CSS PIE而进行转换，以避免错误，这是令人鼓舞的。）

除了输入和图像之外，我想知道是否有办法转换整个样式表。帮助我看看我的逻辑是否有用。我想我已经创建了几个元素，我只需要将它们组合在一起。

单独使用CSS无法解决问题，因为无法知道哪些元素将被嵌套。所以它需要扫描html输出。最好的方法是什么？我能想到的唯一方法是应用所有内联样式， generator已经转换为电子邮件模板等。一旦样式内联，这将显示所有内容是如何嵌套的。从那以后，与样式表进行比较。

将每个嵌套元素与“em”比较到任何带有“em”的父元素，以相应地生成px，并且我已经有一个正则表达式工具来解析css，使这更容易。

一个问题是一个类可以嵌套在不同的元素下，单个类中的em在它的上下文中变得不同，因此不可能转换为px并应用相同的。我相信，唯一的解决方案是在css表中重新创建嵌套结构或部分，以便相应地应用px，只要字体大小在上下文中有所不同。

例如：

<code>
    // Original Stylesheet
    .mainClass{font-size:1em;}

    // HTML
    <div id="outerNest" style="font-size:.5em;">
        <div class="mainClass"> Font here is .5em </div>
    </div>

    <div class="mainClass> Font here is 1em</div>

        // New stylesheet 
    .mainClass{font-size:16px;}

    // newly created styles to work with px conversion
    #outerNest .mainClass{font-size:8px;}
</code>

一个。你认为那可行吗？ B.有更好的方法吗？ C.它有什么价值吗？我可以在一些随机的情况下在蓝色的月亮中使用它一次，但我怀疑很多人会发现它具有任何价值。或者是否存在人们碰到这里和那里的方便的情况？

脚本将css表从px转换为em

7 个答案: