脚本将css表从px转换为em

任何人都知道将样式表从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做到这一点？

已邀请:

7 个回复

容淑阔九

将您的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'); 

}

镰茧钩

你不能明智地交换那样的px和em大小。 px大小是绝对值，无论它在何处，都将保持相同的大小。 em大小相对于父元素，因此0.5em是父元素大小的一半。如果这没有多大意义，请考虑以下代码： / * CSS * / span {font-size：0.9em; } ＆lt;！ - HTML - ＆gt; ＆LT;跨度＆GT;测试，＆LT;跨度＆GT;测试，＆LT;跨度＆GT;测试和LT; /跨度＆GT; ＆LT; /跨度＆GT; ＆LT; /跨度＆GT; 在这个例子中，你会发现单词“Testing”变得越来越小，因为每个span标签的字体大小是上面一个的90％。对于body标签，1em的字体大小大致相当于16px，但这是唯一一次可以合理地将一个大小转换为另一个大小

瞧叮

您可以在Perl中轻松完成：

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

盛梯獭八搽

我用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技能才能正确使用它。

仇聘发栖

我意识到这是一个旧线程，但我认为这可能会帮助某人：将px转换为em： target÷context = result 例如：找到1px＆amp;的价值说容器的字体大小是16px，方程式如下： 1÷16 = 0.0625~ （最好是四舍五入到最接近千分之一。） 1px = 0.063em 从这里您还可以通过目标* em_value =结果找到其他测量值例如： 10 * .063 = .63 10px = .63em 我希望这是有道理的。帮助某人。

迪擅哨乘傅

正如James指出的那样，任何直接转换器的问题在于样式表不知道哪些元素是嵌套的。因为em值是相对的，所以计算的font-size将在重度嵌套元素中变化。您需要一个工具在渲染后扫描HTML输出，并递归调整相关样式。我编写了一个JavaScript组件，可以证明在这方面很有帮助。你可以在这里抓住它。建议的工作流程是在浏览器中调用emify(document.body)，然后提取相关的em值并将其注入您的CSS。不理想，但这是一种准确的做法。

埃输林桨铃

从前面的讨论看，好像没有在线生成器，对吧？我肯定找不到一个会解析整个样式表的人。首先，如果将em应用于图像或输入，除了输入内的字体外，它们是相对的，如果是，那么它是什么以及如何？图像不能嵌套，我很难看到它们相对于每个父div宽度。（为了CSS PIE而转换，以避免错误，这是令人鼓舞的）。除了输入和图像，我想知道是否有办法转换整个样式表。帮助我看看我的逻辑是否有用。我想我已经创建了几个元素，我只需要将它们组合在一起。单独使用CSS无法解决问题，因为无法知道哪些元素将被嵌套。所以它需要扫描html输出。最好的方法是什么？我能想到的唯一方法是应用所有内联样式，生成一个生成器来转换电子邮件模板等。一旦样式内联，这将显示所有内容是如何嵌套的。从那以后，与样式表进行比较。将每个嵌套元素与“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>

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

要回复问题请先登录或注册

脚本将css表从px转换为em

7 个回复

发起人

em

问题状态

脚本将css表从px转换为em

与内容相关的链接

7 个回复

发起人

em

问题状态