CSS 中的长度单位

CSS 中的长度有很多种，有很多没接触过，这次就来记录一次各单位的介绍。

px

1px 表示屏幕上一个像素的大小，该长度是绝对的。这是最传统的长度表示方法，用 px 表示长度的好处就是准确而直接。但是由于现在屏幕的尺寸越来越多，各种尺寸差别很大，使用 px 表示长度很难获得统一的视觉效果，在排版上也经常需要去肉眼估，一些宽度需要手动不断调整。

em

em 这个单位稍微有点绕，1em 的大小等于当前元素上 font-size 的大小。该长度是相对的。在 body 上默认的 font-size 是 16px，而子元素默认继承父元素的 font-size。也就是说在整个页面都没有规定 font-size 时，全局 1em = 16px。

有时为简化 font-size 的换算，需要在 css 中的 body 选择器中声明 font-size = 62.5%，此时 1em = 16px * 62.5% = 10px，这样 12px = 1.2em，10px = 1em，也就是说换算时只需将原有 px 数值除以 10，然后换上 em 作为单位即可。

这里需要注意的是当你在不同的地方设定了不同的 font-size 的话 1em 的值也会变得不同，尤其是 font-size 属性会从父元素继承，当你用 em 来设置 font-size 的值时，还需考虑父元素 font-size 的大小。

以下这种情况在 html 上 font-size 为 10px，div 内 font-size 首先从父元素继承 10px 然后再 1.2 = 12px，于是在 div 内的当前元素的其他地方如设置宽度高度时 1em = 12px，同理在 p 里面 font-size 为 12p * 1.2 = 14.4px，于是在 div 内的当前元素的其他地方设置长度时1em = 14.4px。

由于 em 这个单位跟字体是挂钩的，所以当我们在文字排版方面用 em 就会比较方便，比如：菜单、表格等。当我们知道一列表格最长显示 4 个字，那么我们就可以把宽度设置为 4em。此外只要改变字体的大小就能很轻易的调整所有元素的大小。

rem

理解了 em 之后，rem 就简单多了，rem 表示相当于根元素的 em 值，它避免像上面例子那样字体大小逐层复合的连锁反应导致长度计算的复杂性。确定了 body 的 font-size 值之后，rem 可以当做绝对长度一样使用。在不规定 body 的 font-size 的默认情况，1rem = 16px。目前除 IE 8 及更早版本外，所有浏览器均已支持 rem。

%

% 也是一个相对长度单位，100% 等于父元素的宽度或高度（不包括 padding ）。对于当前元素的宽度、左右 100% 等于父元素的宽度，而对于高度、上下 100% 等于父元素的高度。

vm / vh

vw / vh 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，1vw 等于视窗宽度的 1%，而 1vh 等于视窗高度的 1%。

视窗（Viewport）是你的浏览器实际显示内容的区域，换句话说是你的不包括工具栏和按钮的网页浏览器。

vw / vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

vmin / vmax

vmin 表示当前 vw 和 vh 中较小的一个值 vmax 表示当前 vw 和 vh 中较大的一个值。

做移动页面开发时，如果使用 vw / wh 设置字体大小（比如 5vw ），在竖屏和横屏状态下显示的字体大小是不一样的。

由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

vw / vh，vmin / vmax：IE 9+ 局部支持，Google Chrome / Firefox / Safari / Opera 支持，iOS Safari 8+ 支持，Android Browser 4.4+ 支持，Google Chrome for android 39 支持。

其他

他们都是绝对长度单位有以下关系：

1 in = 2.54 cm = 25.4 mm = 101.6 q = 72 pt = 6 pc = 96 px