Rem與媒體查詢不兼容？

我使用CSS斷點來更新我的網站上的字體大小。
常規文本響應符合市場預期，但受使用REM值不類的文字。
任何人有一個想法，爲什麼？

（嘗試在全網頁的摘要和調整您的瀏覽器）Rem與媒體查詢不兼容？

body { font-size: 22px; } 
 
.test { font-size: 2rem; } 
 

 
@media only screen and (max-width: 1280px) { 
 
\t body { font-size: 20px; } 
 
} 
 
@media only screen and (max-width: 1024px) { 
 
\t body { font-size: 17px; } 
 
} 
 
@media only screen and (max-width: 800px) { 
 
\t body { font-size: 15px; } 
 
} 
 
@media only screen and (max-width: 648px) { 
 
\t body { font-size: 18px; } 
 
}

Example 
 
<div class="test">Example</div>

來源

2014-11-20 Simon Arnold

使用rem尺寸基於 '根元素' 上，因此rem的字體。根元素實際上是html元素，而不是body。因此，當您根據子元素定義子元素的字體大小時，更改body元素的字體大小不再相關。

替換body與樣品中html，它會正常工作。

來源

2014-11-20 23:01:30

男人，幾乎相同的迴應，直至收盤。 – 2014-11-20 23:05:48

儘管如此，你打敗了它：P – 2014-11-20 23:06:36

謝謝。好答案！我標記了你接受的11秒鐘：P – 2014-11-21 14:39:10

你設定了錯誤的元素的font-size。 rem是根em單元。文檔根目錄不是body，而是html。

如果你改變所有這些body引用html參考，一切都將正常工作。

來源

2014-11-20 23:01:41

謝謝。好答案！ – 2014-11-21 14:38:06

Rem與媒體查詢不兼容？

回答

相關問題