理解 CSS 长度单位

2015年10月19日

单位很多,并不都聊

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

结语

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