为什么 Rem 高度在 Chrome 设备仿真（和移动设备）中缩放答案

【问题标题】：Why Rem height is scaling in Chrome Device Emulation (and mobile devices)为什么 Rem 高度在 Chrome 设备仿真（和移动设备）中缩放
【发布时间】：2017-07-06 08:46:20
【问题描述】：

请看我的演示视频： https://youtu.be/8BQ_UgMGK2E

我确信rem 非常适合组件，em 适合子组件，但似乎我的height:5rem 对应的不是root font-size:16px

我不明白为什么设备/移动仿真似乎会缩放根字体大小，因为rem 应该在 16px 上保持一致，无论屏幕上有多少像素

元标记只是说 charset utf 8
window.devicePixelRatio 是一致的2

【问题讨论】：

这看起来很奇怪.. 你的视口元标记是什么样的？
正常的，只是meta charset utf8
没有。听起来您没有指定a viewport 元标记...尝试添加<meta name="viewport" content="width=device-width, initial-scale=1">。
@JoshCrozier 已解决，非常感谢

标签： css mobile media-queries font-size

【解决方案1】：

正如我在上面的 cmets 中提到的，您可以通过将 viewport meta tag 添加到文档的 head 元素来解决此问题。

例如：

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

这样做，您可以控制浏览器视口的宽度和缩放比例。如果此标记的content 值为width=device-width，则屏幕的宽度将与设备无关的像素匹配，并确保所有不同设备的缩放和行为一致。

更多具体信息，这里是我回答的a related question。答案更详细地说明了max-width 和max-device-width 之间的区别。

【讨论】：

【解决方案2】：

正如 Josh Crozier 所说，答案是添加

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

在index.html<head> 部分

【讨论】：