css - 字体大小值随浏览器缩放缩放

Question

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

我的问题

当使用浏览器自己的缩放方法缩放浏览器时(在本例中为 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 读取页面源代码，它仍然告诉我那:

代码 View :

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).

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 ( from this answer ) 还告诉我主体中的字体大小为 16px，无论缩放如何。

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

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

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

• 我发现的所有其他(还有很多)字体大小的问题都与人们输入静态 值(如 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，但我想通过阅读缩放后计算出的字体大小来获得反馈，但发现了我在此处发布的问题)。

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.

有什么解决办法吗？

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();