请参阅我的演示视频： https://youtu.be/8BQ_UgMGK2E
我确信rem对于组件很有用，em对于子组件很有用，但看起来我的height:5rem对应于除了font-size:16px以外的其他内容}
我无法弄清楚为什么设备/移动仿真似乎会缩放根字体大小，因为rem应该在16px处保持一致，无论屏幕上有多少像素
window.devicePixelRatio是一致的2 答案 0 :(得分：2)
正如我在上面的评论中提到的，您可以通过向文档的head元素添加viewport meta tag来解决此问题。
例如：
<meta name="viewport" content="width=device-width, initial-scale=1">
这样，您可以控制浏览器视口的宽度和缩放比例。如果此标记的content值为width=device-width，则屏幕的宽度将与设备无关的像素匹配，并确保所有不同的设备都应该缩放并且行为一致。
有关更具体的信息，请回答a related question。答案详细介绍了max-width和max-device-width之间的区别。
答案 1 :(得分：0)
Josh Crozier提到的答案是添加
<meta name="viewport" content="width=device-width, initial-scale=1">
在index.html <head>部分