1.rem是一個非?？岬腃SS3屬性，它相對于根元素的字體大小適配。
./* Document level adjustments */
html?{
font-size:?17px;
}
@media?(max-width:?900px)?{
html?{?font-size:?15px;?}
}
@media?(max-width:?400px)?{
html?{?font-size:?13px;?}
}
/*?Type?will?scale?with?document?*/
h1?{
font-size:?3rem;
}
h2?{
font-size:2.5rem;
}
h3?{
font-size:?2rem;
}
這樣做很簡單，但是有點兒想當然。最主要的問題是：你不能指望一個頁面上設置的類型，能夠滿足所有模塊的比例要求：大屏幕可能界面元素會顯示的非常大，小的又太小。或者甚至相反，大屏幕可能無法顯示足夠小。遇到這種情況，可以繼續(xù)用@media query調整大小，但是這樣做效率不高，而且會非?；靵y。
因此，我的想法是：
1、文檔級別依然使用px像素，能夠直接有效地檢測出分辨率的變化。
2、頁面每個模塊用rem設置字體大小。因為rem是相對于根元素的字體大小適配。
3、文本元素（H1、H2、p、li等等），如果你調整他們的大小，并用em作為單位，就能和模塊大小形成相對比例?！癳m”作單位時，是一個相對于父元素的值。
/* Document level adjustments */
html?{
font-size:?17px;
}
@media?(max-width:?900px)?{
html?{?font-size:?15px;?{
}
@media?(max-width:?400px)?{
html?{?font-size:?13px;?}
}
/*?Modules?will?scale?with?document?*/
.header?{
font-size:1.5rem;
}
.footer?{
font-size:0.75rem;
}
.sidebar?{
font-size:0.85rem;
}
/*?Type?will?scale?with?modules?*/
h1?{
font-size:?3em;
}
h2?{
font-size:2.5em;
}
h3?{
font-size:?2em;
}
這樣你可以設置一個模塊級別的字體大小，這是非常容易的。
當然IE6-8是不支持CSS3的rem屬性的。移動端的話也不需要考慮這個問題。
