Question

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

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

感谢。

示例：13px - ＆gt; ?? EM

Answer 1

我认为你的问题非常重要。由于显示分辨率的类别正在迅速增加，因此使用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 Fiddle proof of concept

注意：

如果您尝试转换为em的元素是body，则该函数返回false，但这是因为我无法确定设置是否合理价值为1em或只是不管它。
它使用window.getComputedStyle()，因此如果不进行一些调整，它将无法与IE一起使用。

参考文献：

Answer 3

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

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

你最接近你想要的是从像素转换为ems +文档+上下文+设置。但是如果有人要求你用ems布置你的项目，他们可能不会很高兴你试图以像素为单位进行“转换”。

Answer 4

老问题，但作为参考，这里是我拼凑在一起的东西，范围和后缀是可选的。将它作为字符串传递给rem或em值，例如。＆＃39; 4EM＆＃39; [你可以使用空格和大写/小写]，它将返回px值。除非你给它一个范围，它将是查找本地EM值的目标元素，它将默认为body，有效地为你提供rem值。最后，可选的后缀参数[boolean]将添加＆＃39; px＆＃39;返回值使48例如48px。

ex：emRemToPx( '3em', '#content' )

在字体大小为16px / 100％的文档上返回48

/**
* emRemToPx.js | @whatsnewsisyphus 
* To the extent possible under law, the author(s) have dedicated all copyright and related and neighboring rights to this software to the public domain worldwide. This software is distributed without any warranty.
* see CC0 Public Domain Dedication <http://creativecommons.org/publicdomain/zero/1.0/>.
*/
  var emRemToPx = function( value, scope, suffix ) {
    if (!scope || value.toLowerCase().indexOf("rem") >= 0) {
      scope = 'body';
    }
    if (suffix === true) {
      suffix = 'px';
    } else {
      suffix = null;
    }
    var multiplier = parseFloat(value);
    var scopeTest = $('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(scope);
    var scopeVal = scopeTest.height();
    scopeTest.remove();
    return Math.round(multiplier * scopeVal) + suffix;
  };

Answer 5

通常，当您要将px转换为em时，转换会在元素本身上进行。 getComputedStyle会在px中返回值，从而破坏其响应能力。以下代码可用于帮助解决此问题：

/**
 * Get the equivalent EM value on a given element with a given pixel value.
 *
 * Normally the number of pixel specified should come from the element itself (e.g. element.style.height) since EM is
 * relative.
 *
 * @param {Object} element - The HTML element.
 * @param {Number} pixelValue - The number of pixel to convert in EM on this specific element.
 *
 * @returns {Boolean|Number} The EM value, or false if unable to convert.
 */
window.getEmValueFromElement = function (element, pixelValue) {
    if (element.parentNode) {
        var parentFontSize = parseFloat(window.getComputedStyle(element.parentNode).fontSize);
        var elementFontSize = parseFloat(window.getComputedStyle(element).fontSize);
        var pixelValueOfOneEm = (elementFontSize / parentFontSize) * elementFontSize;
        return (pixelValue / pixelValueOfOneEm);
    }
    return false;
};

使用它就像下面这样简单：

var element = document.getElementById('someDiv');
var computedHeightInEm = window.getEmValueFromElement(element, element.offsetHeight);

Answer 6

我已将此功能打包到库中，并完成参数类型检查：px-to-em

鉴于此HTML：

<p id="message" style="font-size: 16px;">Hello World!</p>

您可以期待这些输出：

pxToEm(16, message) === 1
pxToEm(24, message) === 1.5
pxToEm(32, message) === 2

由于OP要求在没有库的情况下执行此操作，我已将px-to-em的源代码复制到现场演示中：

＆＃13;

function pxToEm (px, element) {
  element = element === null || element === undefined ? document.documentElement : element;
  var temporaryElement = document.createElement('div');
  temporaryElement.style.setProperty('position', 'absolute', 'important');
  temporaryElement.style.setProperty('visibility', 'hidden', 'important');
  temporaryElement.style.setProperty('font-size', '1em', 'important');
  element.appendChild(temporaryElement);
  var baseFontSize = parseFloat(getComputedStyle(temporaryElement).fontSize);
  temporaryElement.parentNode.removeChild(temporaryElement);
  return px / baseFontSize;
}

console.log(pxToEm(16, message), 'Should be 1');
console.log(pxToEm(24, message), 'Should be 1.5');
console.log(pxToEm(32, message), 'Should be 2');

＆＃13;

<p id="message" style="font-size: 16px;">Hello World!</p>

＆＃13;

我从this answer了解到，使用getComputedStyle，我们可以可靠地获得带小数点的除数px值，从而提高计算的准确性。我发现Aras的答案可能超过0.5px，这给我们造成了舍入错误。

Answer 7

尝试使用此：

parseInt(myPixelValue) / parseFloat($("body").css("font-size"));

Answer 8

无论如何，Ems不等于像素。它们是相对的衡量标准。

<span style="font-size: 1em;">This is 1em font size, which means the text is the same size as the parent</span>

<span style="font-size: 1.5em;">This is 1.5em font size, which means the text is 150% the size as the parent</span>

基本大小由用户代理（浏览器）决定。

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

8 个答案: