1.rem是一个非常酷的CSS3属性，它相对于根元素的字体大小适配。
./* 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;
}
这样做很简单，但是有点儿想当然。最主要的问题是：你不能指望一个页面上设置的类型，能够满足所有模块的比例要求：大屏幕可能界面元素会显示的非常大，小的又太小。或者甚至相反，大屏幕可能无法显示足够小。遇到这种情况，可以继续用@media query调整大小，但是这样做效率不高，而且会非常混乱。
因此，我的想法是：
1、文档级别依然使用px像素，能够直接有效地检测出分辨率的变化。
2、页面每个模块用rem设置字体大小。因为rem是相对于根元素的字体大小适配。
3、文本元素（H1、H2、p、li等等），如果你调整他们的大小，并用em作为单位，就能和模块大小形成相对比例。“em”作单位时，是一个相对于父元素的值。
/* 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属性的。移动端的话也不需要考虑这个问题。
网友评论