理解 CSS 长度单位

单位很多，并不都聊

Google 一下 “CSS Units” 可以看到，CSS 的单位很多啊，有一些像 vw vh ex ch 感觉用得还是比较少，所以本文中主要讨论的是我觉得用得比较多，可以说也是事关基础，不可不知的几个单位：px em rem ，以及百分比长度的使用。主要着力点是，说说它们几个各自的最佳使用场合。

px 是基本

px 就是 pixel 的缩写了，意思是“像素”。比如一个 iphone5 手机的总宽度是 320px ，那么我的一个 div 宽度设置设置成 160px 就是占据手机屏幕宽度的一半啦。px 的使用就是这么简单直观，所以也是大家最最常用的一种长度单位了。

只是有一点不要搞混了，有时候我们查资料，看到人家说，iphone5 的分辨率是 640x1136 （ http://dpi.lv/ ），这里的 640 难道不是指的 iphone5 的水平像素值是 640 吗？不是这样的。开发中只需要记住 iphone5 的像素值就是 320px 就可以了，无视这个 640 就好。那这里这个 640 是怎么回事呢？可以这样理解，就是手机厂商为了让手机显示效果达到精美，在一个 px 做了 2 个像素点（或者可以认为是2个“物理像素”）。

em 也是很好用的

1em 是多长呢？标准答案是“当前字体大小”（ font-size ）。当前字体大小可以是用 font-size 来手工设置的，如果没有设置，那就是从父元素继承，父元素是 16px 那我的当前字体大小也是 16px 。但是如果父元素没设置呢，那就在往上推，如果推到顶级标签 html 都没有设置 font-size 呢，那么就是流量器默认值 16px 。所以，一般在没有明文的 font-size 设置的情况下，1em 就是 16px ，可以放心大胆的用。顺便说个有意思的点，em 这个名字怎么来得呢？最早 1em 其实是等于大写的 M 的宽度，但是现在已经不是啦，所以也不用记，大概就知道这个就 em 中的 m 的由来就行了（参考）。

但是用 em 有什么好处呢？干嘛不干脆用 px ？看一下下面这端 css 代码

div {
  font-size: 18px;
  padding: 18px;
}

假设这样看起来是完美的。但是，如果我改变这个 div 的 font-size ，比如改成 28px 。那 padding 还依然是 18px ，那么显然，这个这个 div 的布局样式，看起来就跟最初“不一样”，或者说被“打破”了。所以更好的做法是：

div {
  font-size: 18px;
  padding: 1em;
}

这样，当我们改变字体大小的时候，padding 也会跟者变，也就保证了整个这个 div 区域的整体样子不变。当然仅仅从这样一个简单的例子，这个好处体现的不够明显。看看下图的这个复杂一些的组件，如果各个长度都用 em 来设置，就可以通过调整当前 font-size 的大小，来任意改变这个组件的大小了，巧妙吧：

注：上图借用自这篇文章。

这里给出了使用 em 来控制一个组件布局的另外一个例子。

rem 是针对 em 的一个弱点而生的

可见，em 不能说不强大，但也不能说没毛病。毛病就是当一个元素本身就是用 em 做单位的，那它的各级子元素字体设置如果还用 em 做单位，就会晕菜掉。比如有下面这样的代码：

body {
  font-size: 14px;
  text-align: center;
  background: #ff5722;
}
div {
  font-size: 1.2em;
  color: #64ffda;
  font-weight: bold;
  padding: 2em;
}

那么 div 中字体大小是多少个像素呢？答案是：不一定。取决于当前 div 有没有被其他 div 所包含，以及被包含了几层。上面例子出自这里。

这时候，rem 往往就是我们的救星。1rem 永远等于 16px ，等于页面基础字体大小。但是也不是不能改变，可以通过下面的代码把”基础字体“大小改为 14px 。

html {
  font-size: 14px;
}

因为 html 是文档的最顶级标签。或者叫 root 标签，所以对它设置 font-size 就可以改变 rem 的默认值。

百分比宽度

如果给一个 div 设置 width: 50% ，那意思就是，它的宽度是它父元素宽度的 50% 。这个很好理解吧？但是什么时候用百分比宽度？一般就是在做响应式页面设计的时候。

在设计固定布局的时候，对于每个大块，完全可以用 px 为单位来设置。但是响应式页面要能够适应不同的屏幕尺寸，所以这时候，如果把宽度改为用百分比宽度表示，那么页面就会立即产生一定的“流体性”，可以很好的随着屏幕宽度的变化而变化了。实际中如果要把一个固定布局的页面改成响应式页面，长度单位“绝对变相对”是几乎必然会用到的技巧。所以，百分比宽度一定要会用。

结语

其他单位也都有各自的应用场合，一般都是在响应式设计的时候大显神威，所以在上面聊的这几个最重要的单位掌握好之后，就可以拓展一下，学习在文章开头提到的那些不太常用的单位了。参考资料如下：