同一CSS在不同页面上产生不同的字体大小 [英] Same CSS producing different font sizes on different pages

问题描述

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

I am trying to create CSS for a small-screen view of my web application, and I'm running into maddening font-size issues. Here's the scenario.

我有一个课，叫它.noListItemsWords.

I have a class, lets call it .noListItemsWords.

.noListItemsWords {
   font-size: 80%;
}

在两个页面上DOM上任何位置的唯一父级中，设置字体大小的是body，它的字体大小为24pt.

The only parent anywhere up the DOM from this on both pages that sets the font-size is body, which has a font-size of 24pt.

在第一页上，浏览器正在以47.7681px的字体大小呈现此元素:

On page one, the browser is rendering this element with a font-size of 47.7681px:

在第二页上，浏览器仅以32px的字体大小呈现此内容:

On page two, the browser is only rendering this at font-size of 32px:

为什么会这样?有什么办法可以解决吗?

Why does this happen? Is there any way to deal with it?

显示在我的body标签和rem单位上为字体使用基本百分比并不能解决问题:

Showing that using a base percentage on my body tag and rem units for my font does not fix the issue:

在Google Chrome 57中进行了测试

Tested in Google Chrome 57

推荐答案

好吧，我真的不太明白为什么可以解决这个问题，但是为视口添加一个meta标签会使字体的行为恢复到预期的状态:

Well I don't really understand the reason why this fixes it, but adding a meta tag for the viewport made the font behavior go back to expected:

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

这篇关于同一CSS在不同页面上产生不同的字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！