字体大小值随浏览器缩放而缩放

Question

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

我的问题

当使用浏览器自己的缩放方法（在本例中为 Firefox v46。我也使用 Chrome v51 完成此操作）缩放浏览​​器时，网站上的文本会改变大小，但是，各种填充和其他一些元素都有缩放与字体大小有关，rem 值，但使用 Firebug（和 Chrome 检查器）查看计算和源代码时，即使在缩放时，这些值也不会显示缩放调整后的计算变化（以 px 为单位）。

例如：

CSS：

html,body {
    font-size: 16px; /*the base.*/ 
}

nav {
    font-size: 0.75rem; /* should be 12px */
}

.textBlock {
    font-size: 0.95rem; /* should be 15.2px */
    padding: 0 0.15rem; /* should be 2.4px */
}

现在，当我以 100% 缩放加载页面时，所有内容都按比例显示，所有计算值都与注释相同。但是，如果我增加缩放比例，例如 120%，页面上的所有文本都会按比例增加（而非字体大小相关的元素保持一致），但是然后用 firebug 读取页面源，它​​仍然告诉我那：

代码查看：

html, body {
    font-size: 16px; 
}   
.textBlock {
    font-size: 0.95rem; 
    padding: 0 0.15rem; 
}

计算结果

font-size: 15.2px (in textBlock).
padding: 2.4px (in textBlock).

我希望能够查看页面上元素的计算大小考虑到缩放值。

我的印象是，通过更改浏览器的缩放比例，它改变了body（或html）元素的基本字体大小，因此1rem 的计算值从16px 变为@987654333 @（例如），因此所有相关的子元素都会适当地缩放。

字体确实会缩放，但作为浏览器用户，我没有得到关于页面上基于字体的元素的当前输出大小的反馈。

进一步测试

• 使用 javascript (from this answer) 还告诉我字体大小在主体中为 16px，无论缩放。

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

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

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

• 我发现的所有其他（还有很多）字体大小的问题与人们将 static 值（例如 14px）作为它们的元素大小并期望它们能够扩展。

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

我想要实现/发现什么

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

Zoom 120% on .textBlock [computed] {
    font-size: 18.24px; /* (16px * 1.20) * 0.95 */
    padding-left: 2.88px; /* (16px * 1.20) * 0.15 */
    padding-right: 2.88px; /* (16px * 1.20) * 0.15 */
}

在我自己的情况下，这对于测量填充更重要，因为在我的情况下它们通常也是rem（我发现由于浏览器缩放不是 100%，一些元素溢出）。但不管我自己的要求如何，我很惊讶我似乎无法找到我认为非常基本需要的计算值。我想解决这个问题（老实说，我可以很容易地修复我自己的 CSS，但我想通过阅读缩放后计算出的字体大小来获得反馈，但发现了我在此处发布的问题）。

基本上，我希望能够根据浏览器缩放值（rem 标量值）从网站获得计算出的 CSS 值的量化反馈。

有什么解决办法吗？

Answer 1

首先，rem unit is related to the root element，即html，因此，在body上更改font-size对后代元素没有任何影响。

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

要获得实际的字体大小，您需要自己计算。你如何做到这一点是described by Tom Bigelajzen。他还创建了script to detect the zoom level。

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

var cs = window.getComputedStyle(element);
var actualSize = Number.parseFloat(cs.fontSize) * detectZoom.zoom();