jQuery/JavaScript:以简单的方式将像素转换为em

Question

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

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

谢谢.

示例:13px - > ?? em

Answer 1

我认为你的问题非常重要.由于显示分辨率的类别正在迅速增加,因此使用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();.

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

Answer 2

以下似乎可以按照您的要求执行,但它基于font-size父级和元素本身,在以下位置返回px:

function px2em(elem) {
    var W = window,
        D = document;
    if (!elem || elem.parentNode.tagName.toLowerCase() == 'body') {
        return false;
    }
    else {
        var parentFontSize = parseInt(W.getComputedStyle(elem.parentNode, null).fontSize, 10),
            elemFontSize = parseInt(W.getComputedStyle(elem, null).fontSize, 10);

        var pxInEms = Math.floor((elemFontSize / parentFontSize) * 100) / 100;
        elem.style.fontSize = pxInEms + 'em';
    }
}

JS小提琴概念证明.

笔记:

• 该函数返回false,如果你想转换的元素em是body,虽然那是因为我不能工作了,是否是明智的值设置为1em或者干脆息事宁人.

• 它使用window.getComputedStyle(),因此如果没有一些调整,它将无法与IE一起使用.

参考文献:

• Math.floor().
• parentNode.
• parseInt().
• tagName.
• toLowerCase().
• window.getComputedStyle().

Answer 3

像素和 em 是根本不同类型的单位。你不能简单地在它们之间进行转换。

例如，如果用户在网站上的默认字体大小为 16 像素，而顶级标题的样式为 200% 字体大小，则 1em 可能等于 32 像素。将标题移动到文档中的其他位置，可以是 64 像素或 16 像素。把同一个文档给不同的用户，可能是30/60/15px。开始谈论不同的元素，它可能会再次改变。

最接近您想要的是将像素转换为 ems+document+context+settings。但是，如果有人要求您使用 em 来布局您的项目，他们可能会因为您尝试以像素进行布局然后“转换”而感到不高兴。