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

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

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 检查员。

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

我发现所有其他（并且有相当多）字体大小的问题与人们输入 static 值，例如 14px 作为它们的元素大小，并期望它们缩放。
我找不到关于浏览器实际如何使用缩放机制以及开发人员如何使用此工具的有用文献（自 2008/09 以来）。

我在做什么achieve/find

我希望能够在任何浏览器缩放级别查看网页，并能够检测并获得反馈，告诉我各种元素上 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，但我想通过阅读缩放后计算出的字体大小来获得反馈，但发现我 post 这里）。

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. He also created a script to detect the zoom level.

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

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

Answer 2

您可以使用像素比率来确定用户设置的缩放级别，例如：适用于 chrome、firefox、edge 和 brave 浏览器

@media only screen and (min--moz-device-pixel-ratio: 1.25),
    (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-device-pixel-ratio: 1.25)  {

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

Font size value scaling with browser zooming

css

firebug

font-size