logo标签列表

将CSS样式表从像素转换为em的脚本

cssfont-size
15

有人知道一种脚本（PHP、Python、Perl、Bash等），可以将样式表从px转换为em吗？

比如，它将以文件名和基准字体大小（默认为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实现这个的方法？

8个回答
19

复制/粘贴你的 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'); 

}
8

你可以很容易地用Perl来完成：

perl -p -i -e 's/(\d+)px/($1\/16).em/ge' stylesheet.css
em 转 px（未经测试）：perl -p -i -e 's/([\d+.]+)em/($1*16).px/ge' stylesheet.css - Paolo
这适用于REM转换。 - Ferhat
8
你不能像那样明智地交换px和em大小。 px大小是绝对值，无论在哪里它都保持相同的大小。 em大小相对于父元素，因此0.5em是父元素大小的一半。如果这听起来不太合理，请考虑以下代码片段：
/* CSS */ span { font-size: 0.9em; } Testing, Testing, Testing 在这个例子中，你会发现单词“Testing”变得越来越小，因为每个span标签的字体大小是上面一个标签的90％。
对于body标签，1em的字体大小大约相当于16px，但这是唯一可以明智地将一个大小转换为另一个大小的时候。
我想，这取决于你的样式表管理得有多好，但我理解这个观点。这可能就是为什么没有一个...如果确实没有的话。尽管如此，我可以使用这样的转换器。它将真正帮助我将现有的样式表转换为我的排版方法。 - Sy Moen
例如，在良好结构的布局中，该按钮（来自我的示例）只会出现在这样的上下文中：<code>body > section||aside > form > button</code> 我永远不会在一个按钮内部放置另一个按钮等。 - Sy Moen
我不知道是否有任何自动化系统，但我认为你完全可以编写一个程序来扫描HTML输出和CSS，并成功地将所有px大小转换为准确的em大小。不过，如果你有任何动态内容，那么上帝保佑你 :-P 另外，由于所有现代浏览器都会缩放页面而不是简单地尝试扩展大小（并保持px大小不变），所以你已经拥有了一个完美的工作布局 - 我个人会让它保持原样。 - James Long
我有所有的动态内容...关键是我还有高度结构化的布局和良好管理的样式表。我需要一种快速的方法将现有的客户端样式表转换为ems，以便我可以重新创建它们而不用在图表上查找100个转换。此外，人们在排版中使用ems的原因是页面可以在UA之间自动缩放，而无需用户交互。 - Sy Moen
我认为手动检查所有内容并自己进行转换可能是最快的方式。您良好结构化的布局和样式表应该使工作相对容易。 - James Long
显示剩余2条评论
2

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

1
如果你使用'rem'而不是'em'，那么这个脚本和整个想法就有意义了。正如其他帖子所建议的那样，em是一个相对单位，因此无法从px进行转换。但是'rem'是一个绝对单位，这个脚本可以用于这个目的！ - Jesse Patel
2

我知道这是一个旧的帖子，但我认为这可能会对某些人有所帮助：

将像素转换为em： 目标÷上下文 = 结果

例如：

要找到1px的值，并且容器的字体大小为16px，则方程如下：

1 ÷ 16 = 0.0625〜

（最好四舍五入至千分之一。）

1px = 0.063em

从中可以通过目标* em值=结果找到其他尺寸。

例如：

10 * .063 = .63

10px = .63em

希望这讲得通并对某人有所帮助。

1
正如詹姆斯所指出的，任何直接转换器的问题在于样式表不知道哪些元素是嵌套的。因为em值是相对的，在嵌套元素中计算的font-size将会有所变化。您需要一个工具，在呈现HTML输出后扫描它，并递归调整相关的样式。
我编写了一个JavaScript组件，可能在这方面证明有用。您可以在此处获取它。
建议的工作流程是在浏览器中调用emify(document.body)，然后提取相关的em值并将其注入回您的CSS。
虽然不理想，但这是一种准确的方法。
0

从之前的讨论来看，似乎没有在线生成器存在，对吗？我确实找不到一个可以解析整个样式表的。

首先，如果em应用于图像或输入框，除了输入框内的字体外，它们是否是相对的，如果是，是什么和如何呢？图像不能嵌套，我很难看到它们与每个父div宽度相关。 （为了避免错误而进行CSS PIE转换，这就是灵感所在）。

除了输入框和图像之外，我想知道是否有一种方法可以转换整个样式表。帮我看看我的逻辑是否可行。我认为我已经创建了几个元素，我只需要把它们拼在一起即可。

仅使用CSS无法完成此操作，因为不可能知道哪些元素将被嵌套。因此，它需要扫描HTML输出。最好的方法是什么？我能想到的唯一方法是将所有样式都应用于内联，这已经被制作成{{link1：generator}}以转换电子邮件模板等。一旦样式是内联的，这将显示所有内容的嵌套方式。从那里，与样式表进行比较。

将每个具有 "em" 的嵌套元素与任何带有 "em" 的父元素进行比较，以生成相应的像素值，我已经有一个正则表达式工具来解析 CSS，使得这变得更加容易。

唯一的问题是，一个类可以嵌套在不同的元素下，单个类中的 em 在其上下文中会变得不同，因此无法将其转换为 px 并应用相同的值。我认为唯一的解决办法是在 CSS 样式表中重新创建嵌套结构或其中一部分，以便在上下文中字体大小有所不同的情况下应用相应的像素值。

例如：

<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. 这样做是否值得？我可能只会在一些偶然的情况下偶尔使用它，但我怀疑很少有人会觉得它有任何价值。或者是否存在一些情况，在这些情况下它会很方便，人们也确实会遇到这种情况呢？

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接