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

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

不会在这里发布代码，因为它与插件本身无关。

示例：13px -> ??em

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

当您可以查看代码时，JQuery 插件并不是很可怕，特别是如果它们简短而甜蜜，例如这个插件可以将像素值转换为em https://raw.github.com/arasbm/jQuery-Pixel-Em-Converter/master/pxem.jQuery.js如你所愿。事实上，它太短了，我将把整个内容粘贴在这里。有关版权声明，请参阅链接。

$.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(); or $(myEmValue).toPx();.

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