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