在我的應用程序中，我使用Bootstrap，並將2rem設置爲我的h2元素，將1.7rem設置爲我的h3標記。即使我調整我的桌面瀏覽器寬度（到移動大小），h1比我想要的h3更大。但是，如果我使用開發人員工具切換到移動設備視圖或從手機查看網站，h1會變得比h3小！這裏可能發生了什麼？它發生在我創建的多個網站中。使用rem時，移動設備中的自舉標題字體大小很小
例小提琴（無法在小提琴複製的問題，但它的代碼。）：https://jsfiddle.net/gor87kg6/1/
其中有問題的活動網站：http://jayatours.lk/
繼Bootstrap移動優先方法後，我注意到您的網站並未使用視口元。
嘗試加入以下的<head>：
<meta name="viewport" content="width=device-width, initial-scale=1">
背景資料：
移動瀏覽器呈現在一個虛擬的 「窗口」 的頁面（視口），通常比屏幕寬，因此他們不需要將每個頁面佈局擠壓到一個小窗口中（這會打破許多非移動優化網站）。用戶可以平移和縮放以查看頁面的不同區域。
視口信息：
width屬性控制視口的大小。它可以設置爲特定數量的像素，例如width = 600或特殊值設備寬度值，這是在100％的比例下，CSS像素中屏幕的寬度。 （有相應的高度和設備高度值，這可能與基於視窗高度改變大小或位置元件的頁面是有用的。）
我認爲這可能是你的問題的原因是使用rem似乎正確實施。它可能更可能是mobile/ tablet設備本身的dpi/ screen resolution。
非常感謝！這正是我遇到的問題。 – THpubs
rem爲單位相對的字體大小基地（html）標記。如果您沒有明確聲明，瀏覽器中的默認值通常爲16px。也許手機瀏覽器的默認值較小？
嘗試使用rem單位之前設置基本字體大小：
html { font-size: 16px; }
實際上Bootstrap已經將它設置爲'10px'。但仍然有問題。 – THpubs
我看不出有什麼問題。如果你仍然看到這個問題，那麼可以有兩種方法來解決這個問題： 1）請參閱媒體查詢中未再次設置h1字體大小 2）檢查應用於html &的基本字體是否爲在媒體查詢中重置
您可以檢查H1的元素，並查看它在模擬移動屏幕中查看時的當前字體大小？ – iMarkDesigns
h2在移動視圖中的大小是2rem和h3 1.7rem ... – THpubs
您是否嘗試過使用@media覆蓋它？ – iMarkDesigns