开发控制台中的 rem，如何将其“转换”为 px？ [关闭]答案

【问题标题】：rem in Dev Console, how to "convert" it to px? [closed]开发控制台中的 rem，如何将其“转换”为 px？ [关闭]
【发布时间】：2014-05-21 22:58:08
【问题描述】：

我正在通过 Chrome 及其开发工具检查网站。当我检查一个元素时，字体大小只有一个 rem 属性。

我想将其“翻译”为 Pixel。

有办法吗？如果不是，为什么？

【问题讨论】：

您是否检查了“计算”选项卡？
How to calculate REM for type? 的可能重复项

标签： html css

【解决方案1】：

你可以使用

getComputedStyle(theElement).fontSize;

如果你想将rem中的任意数字转换为像素：

function rem2px(rem) {
    var el = document.createElement('div');
    document.body.appendChild(el);
    el.style.width = '1000rem';
    var factor = el.clientWidth / 1000;
    document.body.removeChild(el);
    return rem * factor;
}

^{（我使用1000 以获得更高的精度。）}

【讨论】：

【解决方案2】：

rem 是根元素（HTML 文档中的html）字体大小的比例。

如果您知道该元素的字体大小（以像素为单位），那么您可以乘以 rem 值。

如果您不知道（例如，因为它没有明确指定并且正在使用用户的偏好），那么您就无法知道。

您的浏览器的开发工具可能会为您计算该值（无论它们在哪里显示您的样式表的计算值），但它们将使用您为默认字体大小配置的任何值。其他人可能有不同的看法。

【讨论】：