在具有相同 rem 的元素上，字体大小的计算方式不同

Question

我有一个网页，它分为几个部分，每个部分都有一个标题 div 和一个内容 div，点击标题后会展开。

标题 div 的字体大小为 2rem，内容 div 的字体大小为 1.8rem。根的字体大小为 62.5%（为了更容易转换，因此在桌面上为 1rem=10px）。

在我的桌面上，标题的计算字体大小为 20 像素，内容的字体大小为 18 像素，这与预期完全一致。

但是，当我使用 Chrome 开发工具将页面作为移动设备查看时（或者如果我使用智能手机查看页面），标题的计算字体大小为 20 像素，内容的计算字体大小为 43.0718 像素（因设备而异）这意味着内容是可读的，但标题太小了，您几乎无法阅读或点击它们。

Answer 1

尝试在 HTML 的 head 标签中添加这个：

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