在具有相同 rem 的元素上，字体大小的计算方式不同
Posted
技术标签:
【中文标题】在具有相同 rem 的元素上，字体大小的计算方式不同【英文标题】：font-size is computed differently on elements with same rem 【发布时间】：2022-01-05 14:52:00 【问题描述】：我有一个网页，它分为几个部分，每个部分都有一个标题 div 和一个内容 div，点击标题后会展开。
标题 div 的字体大小为 2rem，内容 div 的字体大小为 1.8rem。根的字体大小为 62.5%（为了更容易转换，因此在桌面上为 1rem=10px）。
在我的桌面上，标题的计算字体大小为 20 像素，内容的字体大小为 18 像素，这与预期完全一致。
但是，当我使用 Chrome 开发工具将页面作为移动设备查看时（或者如果我使用智能手机查看页面），标题的计算字体大小为 20 像素，内容的计算字体大小为 43.0718 像素（因设备而异）这意味着内容是可读的，但标题太小了，您几乎无法阅读或点击它们。
【问题讨论】：
【参考方案1】：尝试在 html 的 head 标签中添加这个：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
【讨论】：
以上是关于在具有相同 rem 的元素上，字体大小的计算方式不同的主要内容，如果未能解决你的问题，请参考以下文章