移动铬和桌面铬的不同css字体大小计算，为什么？ [重复]

Question

这个问题在这里已有答案：

• Should I use px or rem value units in my CSS? 11个答案
• How to correctly work out briefed px to em with body and html preset sizes 1回答
• Is the default font-size of every browser 16px? Why? 1回答

我研究了关于字体大小计算的其他文章，但似乎没有人能回答我的问题。

可以从https://yckelvin.github.io/share/mobile-css.html查看页面

容器的字体基础设置为14px，第一级的字体大小在21px时是正确的，但对于第二级，14 x 1.5 x 15 = 31.5但检查器显示的字体大小是36.55。 em如何计算字体大小？

Answer 1

结果大小=（PX中的父字体大小）*（em）

所以对于“第一容器>第一级”文本：

• 父字体大小，px = 14
• at = 1.5
• 结果尺寸= 14 * 1.5 = 21px

然后为“第一个容器>第一级>第二级”文本：

• 父字体大小，px = 21
• at = 1.5
• 结果尺寸= 21 * 1.5 = 31.5px

假设您的“第一容器>第一级>第二级”文本的目标是将其设为5px，您应该这样做

• 父字体大小，px = 21
• 在px = 5中得到大小目标
• em = 5/21 = .23em

---

当我查看您的页面时，我得到31.5px作为计算字体。如果你得到奇怪的值，我建议从标准化或重置css表开始。

Answer 2

Ich访问了您的网站，元素#first-container div.first-level div.second-level正确呈现在31.5像素。在最新的Chrome和FF上看起来很不错。

＃第一个容器 font-size: 14px;计算了14px

#first-container div.first-level font-size: 1.5em;计算出21px 14px x 1.5 = 21px

#first-container div.first-level div.second-level font-size: 1.5em;计算出31.5px 21px x 1.5 = 31.5px