我之前有写过基于rem和em的响应式排版，并且也有写过两篇有关模块化组件的博客。在这些文章中，有关视窗单位的评论不可避免的形成了一个话题。

你是否思考过对于媒体查询你应该使用px,em还是rem？我也产生过同样的问题，并且目前为止，我还是没有明确的答案。一年之前，我第一次创建 mappy-breakpoint 仓库时，我一直使用rem单位。之后一次和Sam Richard谈话之后，我开始转向使用em,因为我并没有发现两者之间的区别。关于媒体查询，除了em和rem,常用单位还有像素。自从现在所有浏览器存在像素缩放问题，我想知道像素是否还可以用于媒体查询。这周，我打算弄明白两者之间的区别。

网页字体排版的最佳实践之一就是使用相对单位，如rem和em。问题是，你应该使用哪一个呢?一直以来，rem支持者和em支持者之间都存在着争辩，认为应该使用自己支持的那个。在这篇文章中，你会找到我如何在rem和em之间做抉择.你也将了解rem和em到底是什么以及如何使用它们来构建模块化组件。

你可能已经很熟练使用这两个灵活的单位，但你可能不完全了解何时使用 rem ，何时使用 em。 本教程将帮你弄清楚!

在我的关于CSS字体大小的文章中，我写了关于（相对的）新的视窗单位。这些单位vw,vh,vmin,和vmax都是基于浏览器视窗(Viewport)的大小的。因为它们的实际大小是根据视窗(Viewport)大小改变的，对于响应式设计中这使它们成为很好的单位。虽然在我以前的文章中我反对使用这些单位定义字体大小，但是用它们定义布局元素是非常有用的。

我们很容易无法摆脱的使用我们所熟悉的CSS技术，当新的问题出现，这样会使我们处于不利的地位。随着Web继续的发展，对新的解决方案的需求也会继续增大。因此，作为网页设计师和前端开发人员，我们别无选择，只有去了解我们的工具集并且熟悉它。这意味着我们还要了解一些特殊的工具-那些不经常使用的，但是当需要它们的时候，它们恰恰是最正确的工具。今天，我将要向你介绍一些你以前可能不知道的CSS工具。这些工具都是计量单位，就像像素或者相对单位,但是很可能你从来没听说过它们！让我们一探究竟吧。

有几种不同的方法可以在CSS中声明字体大小。总的来说，这些单位分为两类——相对和绝对。**绝对单位**（大多）是固定的，并且涉及到一些物理的测量。他们一旦被声明，将不能通过改变其他元素的字体大小来改变他的大小。**相对单位**没有一个客观的测量。相反，它们的实际大小是通过父元素的尺寸来确定的。这意味着他们的大小可以通过改变相关元素的大小来改变。

在网络中充满了资源告诉你用相对长度em和rem来代替像素，因为它们会使你的设计更容易。几乎我所知道的所有的前端工程师（包括我自己）多年来都盲目的追随这些指示，这在行业中也变成了一个约定俗成的标准。最近我做了一些调查研究，完全改变了我对这两个相对单位的看法。从现在开始我将不会再使用rem并且只会在非常特殊的用例中才会使用em。在这篇文章中我将分享我的观察结果，希望可以说服你结束我们挚爱的rem单位，最终没有回退的使它进入我们的工具（鉴于IE8死的慢），但是变得毫无用处支持更受欢迎的CSS参考像素。

CSS的长度单位，大家看得最多的就是像素单位（px）还有就是百分比单位，可是未曾想到，除了这两 个单位还有很多我们不熟悉的，甚至是没有见过的单位，比如说rem、vw、vh等等。当然有些单位现在在各浏览器下还不友好，但是我想将来会像px一样使用起来，这样就能解决一些px之类单位无法实现的功能。今天由Jekst根据Chris Coyier的英文文章原名《The Lengths of CSS》进行翻译，给大家带来一篇有关于CSS的长度单位介绍的文章，希望大家喜欢。

在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EM优点多，还有人在说百分比方便，以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是，仍然有不同的利弊，使各种技术都不太理想，但又无法不去用。真是进也难，退也难呀。