【译】我们怎样学会放弃设置默认的font-size而拥抱em

原文链接：http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/

在css中使用em单位，在灵活性上为用户和开发者带来了好处。但是同em打交道是比较乏味的，你可以列举很多的理由。其中，最出名的，1em的值隐约仅跟基于像素的设计相关。从传统的固定大小的设计转变到灵活的css单位带来了不便，这种不便长期以来一直驱使着web开发者们需要声明一个全局font-size的值，这使得计算比较容易。但使用现代的响应式设计原则使得我们需要保留默认的font-size从而拥抱标准的em。

 

 

也许最流行的全局设置font-size的解决方法是Richard Rutter's brilliant的一篇文章中介绍的，这篇文章名字叫：《怎样通过ems设置文本》。这篇文章提到，通过设置body的font-size为62.5%，那么我们就相当于将1em的默认值改成了10px。这使得从px到em单位的转换更加容易。自从这篇文章发表后，我们(Filament Group)通常就在编写css的时候遵循这个规则，这让开发过程变得愉悦和方便。

 

 

但是在最近，我们开始构建响应式布局，尤其是在基于media query 断点使用em进行布局的时候，我们有好几个理由认为在工作中给body设置font-size不再是一个好主意。我们发现其他开发者也有着类似的想法，但是我们没有看到他们阐述为什么要做出这种改变，在这里我们列出几个我们找到的理由：

 

 

•  1em的值，基于body的font-size，当用在css3 Media Query 比如 @media (min-width: 20em)的时候，在大多数浏览器中是不会生效的。这意味着如果我们将body的font-size的值修改成除100%以外的其他值，我们页需要计算不同的em值，当这些修改的值用于media query的时候。这会导致css文件表现出的样式不一致的情况，难以维护和记录。我们知道Opera Moblie 或称为 Opera Mini在这方面表现并不相同，则进一步加剧了这个问题，但这个问题在最新版本的浏览器中无法重现。
• 文本默认的font-size为10px，太小且难以辨认。因此，如果我们给基础的font-size设置62.5%，我们不得不给我们网站中出现的每一个元素都设置一个相应的font-size值，使其可读。另外，如果我们让body的font-size为100%，这可以让元素根据浏览器默认样式表显示原始的尺寸。这让css更轻量且更灵活。
• 最后，我们发现，在我们的设计过程中，进入浏览器越早，跟1em具体为多少像素值的相关性越小。我们的设计决策更常见的是取决于页面中组件的上下文环境以及它怎样去适应流畅的适应上下文环境，而不管它基于多大的像素。

 

正是由于上述几个原因，我们现在趋向于放弃对body的font-size的设置，同时我们也建议其他的开发者也这么做。

 

 

颇具讽刺意味，细心的读者也许注意到了，在创建这个网站的时候，还是对body的font-size设置了62.5%.目前，正在对网站重新设计中，但是我们还没有解决不断变化的那部分，创建新的使用默认的font-size并基于em的响应式布局的难度足以促使我们产出这篇文章了。

这是否给你带来一些思考呢？我们希望听到您的声音！