rem是一个非常酷的CSS3属性,它相对于根元素<html>的字体大小适配。举一个非常简单的场景,要根据3种屏幕大小适配字体:
通常这么实现:
/* 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是相对于根元素<html>的字体大小适配。
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属性的。移动端的话也不需要考虑这个问题。