为什么雷姆高度在Chrome设备仿真（和移动设备）的缩放

问题描述：

请看看我的演示视频：https://youtu.be/8BQ_UgMGK2E 为什么雷姆高度在Chrome设备仿真（和移动设备）的缩放

我相信rem是伟大的成分，和em对于子组件，但看起来我的height:5rem对应于除根以外的东西font-size:16px

我想不通为什么devic E /移动仿真似乎缩放根字体大小，如rem应该16px的是一致的，不管有多少像素在屏幕上

这看起来很奇怪。您的视口元标记是什么样的？ –

这是正常的，只是元字符集utf8 – neaumusic

不..这听起来像你没有[视口]（https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag）元标记指定...尝试添加''。 –

答

正如我在上面的评论中提到，你可以通过添加一个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之间的区别，答案更详细。

有用的链接https://css-tricks.com/probably-use-initial-scale1/ – neaumusic

答

答案，由乔希克罗泽提到的是添加

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

在index.html<head>部分