如何以简单的方式将像素转换为 em

Question

我正在寻找一种简单的方法来向我的插件添加一行代码，将几个像素值转换为 em 值，因为我的项目布局需要在 em 中。有没有一种简单的方法可以做到这一点，因为我不想向网站添加第三方插件。

不会在这里发布代码，因为它与它自己的插件无关。

示例：13px -> ??em

原文由 user759235 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我觉得你的问题很重要。由于显示分辨率的类别正在迅速增加，使用 em 定位来支持广泛的屏幕分辨率是一种非常有吸引力的方法。但无论您多么努力地尝试将所有内容保存在 em 中——有时您可能会从 JQuery 拖放或其他库中获得像素值，并且您可能希望在将其发送回服务器以进行持久化之前将该值转换为 em。这样下次用户查看页面时，项目就会处于正确的位置——无论他们使用的设备的屏幕分辨率如何。

当您可以查看代码时，JQuery 插件并不是很可怕，特别是如果它们像 这个插件一样短小精悍，可以根据需要将像素值转换为 em 。事实上，它太短了，我会把整个东西贴在这里。有关版权声明，请参阅链接。

 $.fn.toEm = function(settings){
    settings = jQuery.extend({
        scope: 'body'
    }, settings);
    var that = parseInt(this[0],10),
        scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(settings.scope),
        scopeVal = scopeTest.height();
    scopeTest.remove();
    return (that / scopeVal).toFixed(8) + 'em';
};

$.fn.toPx = function(settings){
    settings = jQuery.extend({
        scope: 'body'
    }, settings);
    var that = parseFloat(this[0]),
        scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(settings.scope),
        scopeVal = scopeTest.height();
    scopeTest.remove();
    return Math.round(that * scopeVal) + 'px';
};

使用示例： $(myPixelValue).toEm(); 或 $(myEmValue).toPx(); 。

我刚刚在我的应用程序中对此进行了测试，效果很好。所以我想我分享。

原文由 Aras 发布，翻译遵循 CC BY-SA 3.0 许可协议