在我的应用程序中，我使用Bootstrap并设置 2rem 到我的h2元素和 1.7rem 到我的h3标签。即使我在桌面上调整浏览器宽度（移动设备的大小），h1也比h3大，这就是我想要的。但是，如果我使用开发人员工具切换到移动设备视图或从手机查看网站，则h1会小于h3！这里可能会发生什么？它发生在我创建的多个站点中。
示例小提琴（无法复制小提琴中的问题。但这是代码）： https://jsfiddle.net/gor87kg6/1/
有问题的实时网站： http://jayatours.lk/
按照Bootstrap移动第一种方法，我注意到您的网站没有使用视口元。
尝试将以下内容添加到 <head>：
<meta name="viewport" content="width=device-width, initial-scale=1">
背景资料：
移动浏览器在虚拟“窗口”（视口）中呈现页面，通常比屏幕更宽，因此他们不需要将每个页面布局挤压到一个小窗口（这会破坏许多非移动优化的站点）。用户可以平移和缩放以查看页面的不同区域。
视口信息：
width属性控制视口的大小。它可以设置为特定数量的像素，例如width = 600，或者设置为特殊值device-width值，它是CSS像素中屏幕的宽度，比例为100％。 （有相应的高度和设备高度值，这对于具有根据视口高度更改大小或位置的元素的页面可能很有用。）
我相信这可能是您使用问题的原因 rem 似乎是正确实施的。它可能更倾向于 dpi/ screen resolution 的 mobile/ tablet 设备本身。
rem 是一个相对于基数字体大小的单位（html） 标签。如果您没有明确声明，浏览器中的默认值通常为16px。也许移动浏览器的默认值较小？
尝试在使用前设置基本字体大小 rem 单位：
html { font-size: 16px; }
我没有看到任何问题。如果您仍然看到问题，那么有两种方法可以解决此问题： 1）看到媒体查询中没有再次设置h1字体大小 2）检查应用于html的基本字体以及是否在媒体查询中重置