Question

我正在通过Chrome及其Dev Tools检查网站。当我检查一个元素时，只有font-size的rem属性。

我想将此“翻译”为Pixel。

有办法吗？如果没有，为什么？

Answer 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以获得更高的精确度。）}

Answer 2

rem是根元素的字体大小的一部分（HTML文档中的html）。

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

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

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

在Dev Console中，如何将其“转换”为px？

2 个答案: