相同的CSS在不同的頁面上生成不同的字體大小

Question

我想爲我的web應用程序的小屏幕視圖創建CSS，並且我遇到了令人生厭的字體大小問題。這是場景。

我有一個類，讓我們叫它.noListItemsWords。

.noListItemsWords { 
    font-size: 80%; 
} 

在這兩個頁面上設置字體大小的DOM上的唯一父代是body，它的字體大小爲24pt。

在一個頁面上，瀏覽器渲染這個元素用的47.7681px字體大小：32PX的

第二頁，瀏覽器只在渲染這個字體大小：

這是爲什麼發生？有什麼方法可以處理它嗎？

編輯： 顯示，使用我的身體標記和REM單位爲我的字體基地百分比不解決這個問題：

在谷歌Chrome瀏覽器57

Answer 1

嗯，我真的不明白爲什麼這個修復它，但添加視口元標記所做的字體行爲回去預期：

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

Answer 2

你測試應該在您的body CSS中將font-size設置爲百分比。然後使用rem設置單個字符串文本的大小。

rem將根據您放入基地body類的百分比按比例縮放字體。

body { 
    font-size: 100%; 
} 

.noListItemsWord { 
    font-size: 0.8rem; 
}