文字大小妙主意-Font Size Idea

原文：《Font Size Idea: px at the Root, rem for Components, em for Text Elements》

作者：Chris Coyier，CSS-Tricks站长，Codepen站长

翻译：前端开发whqet，以意译为主，不当之处请大家批评指正。

一年多来，我总说：“rem真的很酷，我将用它定义所有东西，这样我们就可以通过调整根元素的文字大小（font-size)，让所有东西进行缩放”，这是一个甜蜜的美梦，而且不是灾难。我在CSS-Tricks里不断实践这个理念，下面就是一些常见的情境：

我们貌似这样定义样式：

/* 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;
}

我承认我喜欢这份简单，但是我逐渐认识到，这么做有点不且实际尤其是对于复杂的网站。主要问题是，不能期望对一个屏幕设置的文字大小经过简单的缩放之后可以完美的匹配其他设备，大文字缩放之后可能比较大，小文字可能太小（我经常遇到这种情况），又或者正好相反，大文字可能变得太小。

如果出现了文字缩放问题，我们就必须用媒体查询进行特殊的调整，这个不但诡异，而且不高效（调整完大小之后在调整大小修正问题）。

我的点子是这样的：网页根元素用px，然后可以通过修改根元素文字大小高效地进行调整；页面的每个模块中，使用rem设置文字大小；使用em定义文字元素的大小，获得相对于模块的相对值。

这样你可以非常方便的调整模块的文字大小，模块内文字获得一个完美比例，并且合适缩放的机会大大提高，貌似下面这样。

你可以通过下面的案例，试玩一下我的这个主意（抱歉，CSDN博客不能嵌入codepen，所以请大家移步codepen看案例），大家可以通过slider获取最佳的比例。

给定一个中等值，一切比较完美。放大之后，正文文章部分可以获得一个不错的大文字效果，这时侧边栏可能不需要这么大，我们可以比较方面的修正这个问题。缩放也是如此，侧边栏可能缩得太快，我们比较方面的进行修正。

下面是这个点子的实现方法：

/* 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;
}

因为没有在站点实践中验证过，所以在文章标题里使用“点子”(idea)，不过我比较确认，而且将会在未来项目中进行尝试。

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------