我发现了一个使我有些困惑的问题。我在CSS文件中使用rem缩放比例设置了字体大小，并在CSS文件的html{ ... }块中设置了16px的基本字体大小。

我的问题

当使用浏览器自己的缩放方法(在这种情况下为Firefox v46，我也使用Chrome v51)对浏览器进行缩放时，网站上的文字大小会改变，但是，各种填充和其他一些元素的缩放比例与字体大小rem值，但是使用Firebug(和Chrome检查器)查看计算的和源代码，即使缩放也不会显示这些值的缩放调整后的计算变化(以px为单位)。

例如：

CSS：

现在，当我以100％缩放比例加载页面时，所有内容均按比例显示，所有计算值均已注释。但是，如果我将缩放比例提高到例如120％，则页面上所有文本的大小都会成比例地增加(而与字体大小无关的元素保持一致)，然后用萤火虫阅读页面源代码，它仍然告诉我那：

代码视图：

计算结果

I want to be able to view the computed size of the elements on the page taking into account the zoom value .

我的印象是，通过更改浏览器的缩放比例，它更改了body(或html)元素的基本字体大小，从而使1rem计算值从16px更改为17.5px(对于示例)，并且因此所有相关的子元素都将适当缩放。

字体确实可以缩放，但是作为浏览器用户，我无法获得页面上基于字体的元素的当前输出大小的反馈。

进一步测试

使用javascript(从此答案中得出的结果)还告诉我，无论缩放大小，主体的字体大小均为16px。

删除body字体大小不会更改任何内容。

将基本body字体大小设置为rem / em值也不会更改Firebug，Javascript或Chrome Inspector给出的反馈。

为什么我不阅读StackOverflow上的其他字体大小问题

我发现的所有其他(还有很多)字体大小的问题都与人们将诸如14px之类的静态值作为其元素大小并期望它们能够缩放一样。

从2008/09开始，我找不到关于浏览器实际如何使用缩放机制以及开发人员如何使用此工具的有用文献。

我想达到/发现什么

我希望能够以任何浏览器缩放级别查看网页，并且能够检测并获得反馈，告诉我各种元素上的font-size值的大小，例如：

在我自己的情况下，这对于测量填充尤为重要，因为在我的情况下填充通常也是基于rem的(我发现某些元素由于浏览器缩放比例不是100％而溢出)。但是无论我有什么要求，我似乎都找不到我认为非常需要的计算值，这让我感到非常惊讶。我想修复此问题(老实说，我可以轻松地修复自己的CSS，但是我想从缩放后读取计算出的字体大小获得反馈，但发现了我在此处发布的问题)。

Basically, I want to be able to get quantitive feedback of computed CSS values from a website based on the browser zooming value, of the rem scalar value.

有什么解决办法吗？

首先，rem单元与根元素(即html)相关，因此，更改body上的font-size对后代元素没有任何影响。

Firebug和其他开发人员工具根据W3C规范显示计算值。 更准确地说，他们使用window.getComputedStyle()函数获取计算值，并且此函数未考虑缩放级别。

要获得实际的字体大小，您需要自己计算。 Tom Bigelajzen描述了您的操作方式。 他还创建了一个脚本来检测缩放级别。

有了它，您应该能够通过将计算出的字体大小乘以缩放系数来计算实际的字体大小：