Question

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

我的问题

使用浏览器自带的缩放方法缩放浏览器时（本例中为Firefox v46。我也使用Chrome v51完成此操作），网站上的文字大小变得很好，但是，各种填充和其他一些元素都有缩放比例与font-size，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到17.5px（例如），由于这一点，所有相关的子元素都会适当缩放。

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

进一步测试

使用javascript（from this answer）也告诉我，无论缩放如何，主体的字体大小都是16像素。

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

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

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

我发现的所有其他（并且有很多）字体大小的问题与人们放置静态值相关联，例如{{ 1}}作为元素大小并期望它们扩展。

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

我想要实现/找到什么

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

14px

这在我自己的情况下更重要的是测量填充，因为它们通常也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 */ }基于我的情况（我发现由于浏览器缩放不是100％，一些元素溢出）。但不管我自己的要求如何，我都很惊讶我似乎无法找到我认为非常需要的计算值。我想解决这个问题（说实话，我可以很容易地修复自己的CSS，但是我希望从缩放后读取计算字体大小的反馈，但发现我在这里发布的问题）。

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

对此有任何解决方案吗？

Answer 1

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

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

使用浏览器缩放缩放字体大小值

1 个答案: