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

Question

我正在尝试为我的网络应用程序的小屏幕视图创建CSS，并且我遇到了疯狂的字体大小问题。这是场景。

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

.noListItemsWords {
   font-size: 80%;
}

在设置字体大小的两个页面上，DOM上的唯一父对象是body，其字体大小为24pt。

在第一页上，浏览器正在使用字体大小47.7681px呈现此元素：

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

为什么会这样？有没有办法解决它？

编辑： 显示使用我的身体标记上的基本百分比和我的字体的rem单位不能解决问题：

在Google Chrome 57中测试

Answer 1

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

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

Answer 2

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

rem会根据您在基础body课程中所占的百分比来缩放字体。

body {
    font-size: 100%;
}

.noListItemsWord {
    font-size: 0.8rem;
}