相同的 CSS 在不同的页面上产生不同的字体大小答案

【问题标题】：Same CSS producing different font sizes on different pages相同的 CSS 在不同的页面上产生不同的字体大小
【发布时间】：2017-04-22 03:29:17
【问题描述】：

我正在尝试为我的 Web 应用程序的小屏幕视图创建 CSS，但我遇到了令人抓狂的字体大小问题。这是场景。

我有一个类，我们称之为 .noListItemsWords。

.noListItemsWords {
   font-size: 80%;
}

在这两个页面上，唯一设置字体大小的页面上的 DOM 是 body，它的字体大小为 24pt。

在第一页，浏览器渲染这个元素，字体大小为 47.7681px：

在第二页，浏览器仅以 32px 的字体大小呈现：

为什么会这样？有什么办法处理吗？

编辑：显示在我的正文标签上使用基本百分比并为我的字体使用 rem 单位并不能解决问题：

在 Google Chrome 57 中测试

【问题讨论】：

标签： css fonts

【解决方案1】：

好吧，我真的不明白为什么要修复它，但是为视口添加元标记会使字体行为恢复到预期：

<meta name="viewport" content="width=device-width, initial-scale=1">

【讨论】：

【解决方案2】：

您应该在body CSS 中将font-size 设置为百分比。然后使用rem 设置单个文本字符串的大小。

rem 将根据您在基本body 类中输入的百分比来缩放字体。

body {
    font-size: 100%;
}

.noListItemsWord {
    font-size: 0.8rem;
}

【讨论】：

如果我这样做了，正文中的字体大小百分比是多少？对我来说，将绝对字体大小放在正文中，并在其他地方使用相对大小（百分比）是有意义的。这也没有回答为什么我写它的方式不起作用的问题
这是整个网站的基本百分比。因此，将来如果您必须向上或向下缩放所有文本和间距，您只需更改正文中的百分比值，而无需单独更改每个 px 或任何值。所以你应该使用rem 来分隔你的 div 和所有内容。
这仍然不能回答为什么要在我的基本元素中使用相对单位，或者为什么我写的场景不起作用。我已经独立查找了 rem ，发现它与您的基本元素相关，这绝对比百分比或 em 更具确定性，但仍在寻找另一点的更多答案
当您没有设置基本百分比时，浏览器会以不同的方式呈现百分比值。
我已经更新了原始帖子，使用基本百分比和 rem 单位并不能解决问题。浏览器仍然会在两个不同大小的两个不同页面上呈现字体