我正在寻找一种简单的方法来向我的插件添加一行代码，将几个像素值转换为 em 值，因为我的项目的布局需要在 ems 中。有没有一种简单的方法可以做到这一点，因为我不想在网站上添加第三方插件。
不会在这里发布代码，因为它与它自己的插件无关。
谢谢。
示例：13px -> ??em
问问题
31416 次
8 回答
21
我认为你的问题非常重要。由于显示分辨率的类别正在迅速增加，因此使用 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;"> </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;"> </div>').appendTo(settings.scope),
scopeVal = scopeTest.height();
scopeTest.remove();
return Math.round(that * scopeVal) + 'px';
};
用法示例：$(myPixelValue).toEm();或$(myEmValue).toPx();。
我刚刚在我的应用程序中对此进行了测试，效果很好。所以我想我分享。
于 2012-11-05T11:12:09.903 回答
15
以下似乎按照您的要求执行，尽管它基于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';
}
}
笔记：
如果您尝试转换为的元素是 ，则该函数返回 false ，
em尽管body那是因为我无法确定将值设置为1em还是不理会它是否明智。它使用
window.getComputedStyle()，因此如果不进行一些调整，它将无法与 IE 一起使用。
参考：
于 2012-04-24T21:19:15.247 回答
3
像素和ems是根本不同类型的单位。您不能简单地在它们之间进行转换。
例如，用户在一个网站上的默认字体大小为 16 像素，其中顶级标题的样式为 200% 字体大小，1em 可能等于 32 像素。将标题移到文档中的其他位置，可以是 64 像素或 16 像素。将相同的文档提供给不同的用户，它可能是 30/60/15px。开始谈论不同的元素，它可以再次改变。
最接近您想要的是将像素转换为 ems+document+context+settings。但是，如果有人要求您使用 em 布置您的项目，他们可能不会因为您尝试以像素为单位然后“转换”而感到高兴。
于 2012-04-24T21:11:33.320 回答
1
老问题，但作为参考，这是我拼凑的东西，范围和后缀是可选的。将 rem 或 em 值作为字符串传递给它，例如。'4em' [您可以使用空格和大写/小写]，它将返回 px 值。除非您给它一个范围，这将是查找本地 EM 值的目标元素，否则它将默认为 body，有效地为您提供 rem 值。最后，可选的后缀参数 [ boolean ] 会将 'px' 添加到返回值，例如 48 变为 48px。
前任：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;"> </div>').appendTo(scope);
var scopeVal = scopeTest.height();
scopeTest.remove();
return Math.round(multiplier * scopeVal) + suffix;
};
于 2014-10-31T11:40:39.323 回答
1
我已经将此功能打包到一个库中，并完成了参数类型检查：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到了现场演示中：
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');<p id="message" style="font-size: 16px;">Hello World!</p>我从这个答案中了解到，getComputedStyle我们可以可靠地获得带有小数点的除数 px 值，从而提高了计算的准确性。我发现 Aras 的答案可能会偏离 0.5px 以上，这给我们带来了舍入误差。
于 2017-10-14T05:41:57.607 回答
1
通常，当您想转换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);
于 2015-12-31T02:02:47.480 回答
-1
尝试使用这个：
parseInt(myPixelValue) / parseFloat($("body").css("font-size"));
于 2019-02-21T10:52:01.110 回答
-3
无论如何，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>
基本大小由用户代理（浏览器）确定。
于 2012-04-24T21:11:43.553 回答