REM單元在媒體查詢時是否無法使用？如何更新根字體大小？

Question

因此，我有一個網站使用大量的「ems」字體，他們字面上無處不在。我設法用rems替換它們，現在我的媒體查詢似乎沒有工作，因爲我一直在改變它們的根字體大小。

這裏的HTML：

<div id="em"> 
    <h1>EMs are better?</h1> 
    <p>A text.</p> 
</div> 

<div id="rem"> 
    <h1>REMs aren't?</h1> 
    <p>Sad panda.</p> 
</div> 

和CSS：

body { 
    font-size: 14px; 
} 

div { 
    margin: 10px; 
    padding: 20px; 
    text-align: center; 
    background: #efefef; 
} 

#em h1 { font-size: 2em; } 
#em p { font-size: 1em; } 

#rem h1 { font-size: 2rem; } 
#rem p { font-size: 1rem; } 

@media screen and (max-width: 500px) { 
    body { 
    font-size: 6px; 
    background: red; 
    } 
} 

嘗試調整窗口看個究竟，REM箱似乎沒有做任何改動......

http://jsfiddle.net/Q5vSC/

Answer 1

Rem單位基於html e的字體大小lement，而不是body。

你的CSS就改成這樣：

html { // changed from body to html 
    font-size: 14px; 
} 

div { 
    margin: 10px; 
    padding: 20px; 
    text-align: center; 
    background: #efefef; 
} 

#em h1 { font-size: 2em; } 
#em p { font-size: 1em; } 

#rem h1 { font-size: 2rem; } 
#rem p { font-size: 1rem; } 

@media screen and (max-width: 500px) { 
    html { // changed from body to html 
    font-size: 6px; 
    background: red; 
    } 
} 

通知我們的目標在第一線，並在媒體查詢html元素。

這裏是你的jsfiddle修改爲與雷姆斯工作。