关于字体大小适配：根文档使用px，组件使用rem，文本元素使用em

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”作单位时，是一个相对于父元素的值。

下面是一个示例图：

关于字体大小适配：根文档使用px，组件使用rem，文本元素使用em

jsfiddler演示地址

实现如下

/* 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属性的。移动端的话也不需要考虑这个问题。

关于字体大小适配：根文档使用px，组件使用rem，文本元素使用em

相关推荐