小數REM基於字體大小不按預期工作

如果將body font-size設置爲16px，則下面的代碼可以正常工作，但如果將body font-size設置爲100％，則不起作用。（即使100％等於16px）

元素「a」應該具有與body相同的字體大小，所以最可能是16px。元素「b」應該有10％的字體大小，元素「c」應該有30％的字體大小。

問題是隻有Chrome和Vivaldi，元素「b」和「c」似乎不想通過「REM」低於6px「，而Firefox和IE很樂意讓它們降低到1或2像素它工作在，他們都！最終尺寸相同，前者爲6像素。

我使用的Chrome插件CSSViewer這個......我的眼睛：P

這是一個錯誤？或者我做錯了什麼？我真的很希望能夠得到它在Chrome和維瓦爾第以及工作...

這裏是例子：

html { 
 
    font-size: 100%; 
 
} 
 
#a { 
 
    font-size: 1rem; 
 
} 
 
#b { 
 
    font-size: 0.1rem; 
 
} 
 
#c { 
 
    font-size: 0.3rem; 
 
}

<div id="a"> 
 
    Hello world! 
 
</div> 
 
<div id="b"> 
 
    Hello world! 
 
</div> 
 
<div id="c"> 
 
    Hello world! 
 
</div>

來源

2017-01-10 Frank Underwood

轉到您的瀏覽器設置。在Firefox的情況下，在標準字體大小設置旁邊，您會看到一個「擴展設置」按鈕。當你點擊它時，你會看到（除其他外）「最小字體大小」 - 在Firefox中爲10 px。

所以無論你做什麼，只要你不改變該設置，即計算的任何文本小於10px的將10px的顯示...

我想其他的瀏覽器會有類似的設置。

來源

2017-01-10 22:18:58 Johannes

哇，我不知道。那麼，我的Firefox設置爲最小「無」，這就解釋了爲什麼它的工作原理。試圖將其更改爲10，並確認你說的話。儘管發行remians，但它工作，如果我將html標記font-size設置爲基於px的值而不是百分比。 –

您可以使用rem來獲取更大的字體大小，但是您絕不能期望用戶在Firefox上看到小於10px的字體，在Chrome上是6 px或默認設置的任何字體，因爲大多數用戶永遠不會改變這種字體。 – Johannes

即時接受你的答案，因爲它非常接近，但我仍然可以得到它的工作，如果我設置的HTML標籤的字體大小像素，而不是百分比。我不試圖設置實際的文字爲1或2像素，而是基於REM的幾個DIV標籤邊界的寬度。無論如何，謝謝@Johannes！ –

小數REM基於字體大小不按預期工作

回答

相關問題