一开始 web 界很倾向于 Pixel perfect 这个理念，各种布局都精确到了像素点，比如很长一段时间网页内容都是居中在一个固定的 800px 左右的容器中。但是后来 PC 的屏幕越来越大，同时手机屏幕也出现了，导致一个固定的布局无法适应多种设备。因此业界的实践也从大量使用绝对的长度单位，转向使用相对单位。
Absolute length units
| Unit | Name | Equivalent to |
|---|---|---|
cm | Centimeters | 1cm = 96px/2.54 |
mm | Millimeters | 1mm = 1/10th of 1cm |
Q | Quarter-millimeters | 1Q = 1/40th of 1cm |
in | Inches | 1in = 2.54cm = 96px |
pc | Picas | 1pc = 1/16th of 1in |
pt | Points | 1pt = 1/72th of 1in |
px | Pixels | 1px = 1/96th of 1in |
总结：1 in. = 25.4 mm = 2.54 cm = 6 pc = 72 pt = 96 px
CSS 中的像素（px）跟显示器的像素是不一样的。对于一个典型的 23.8 英寸 1080P 分辨率的显示器，显示器的 PPI 是 92，屏幕的物理尺寸为 527.04mm x 296.46mm（20.75" x 11.67"）。在系统缩放比例保持 100% 并且浏览器也不做额外缩放的情况下，1 CSS inch 在屏幕上的长度大约是 1.04 英寸（96/92）。填满 1080 个像素点，需要 20（1080 / 96）个 CSS inch，需要 20.86（1080 / 92）个英寸。
CSS 单位到屏幕单位的换算，在 Media query 部分再详谈。
Relative length units
相对长度的 CSS 单位。这里只关心跟字体大小相关的属性 em 及 rem：
em: Font size of the element.rem: Font size of the root element.
使用相对单位会使得整个样式表的维护性增强（比如你不需要修改到处都是的 px 值），也会使得应用响应式设计更加简单。
em
.padded {
padding: 1em;
}padding 的数值在运行时才会被计算出来，在该属性应用到的元素上，它的 padding 值与其 font-size 值一致。比如该元素的 font-size 为 16px，那么 padding 的值也为 16px。这种值被称为 computed value。em 可以用来实现按不同的字体大小给定不同 padding, height, width, border-radius 等功能，比如：
这是另外一个示例，用来实现不同大小的 box：
对于 font-size 本身，也可以使用 em 单位，会在它继承的 font-size 基础上乘上 em 的比例：
如果对不同属性同时使用 em，可能会有些没那么直观的效果：
在嵌套元素中使用 em 时，会造成一个 shrinking font problem，具体看 CSS in Depth: Ch02 书中示例。
rem
相较于 em，还有一个 rem，它跟 em 的区别是它是相对于 root element，对于一个普通的 HTML 来说即是 <html> 元素。一般页面不会对这个元素设置 font-size，因此 rem 单位用在 font-size 上时，一般是相对于浏览器预设的字体大小。而这个大小，一般默认为 16px（medium）。
rem 的好处在于增强了无障碍性（accessibility）。比如对于视障人士，如果它期望页面的字体更大，他可以用两种方式：
- 使用浏览器提供的缩放功能，一般是 Ctrl-= 这类快捷键
- 将浏览器默认的字体大小调得更大
如果一个网站在设置 font-size 时都用 rem 作为单位，那么上述的第二种方式是有效的。但是大多数网站，特别是电商网站，大量用了 px 来表示字体大小。考虑到电商网站的 UI 一般比较复杂，使用 px 可能对于他们设计网站样式时更有帮助，但是这损伤了无障碍性。现代网站的样式设计应该多用 rem 来表示字体大小。
最佳实践：
对于什么时候用绝对值，什么时候用 em 及 rem，CSS in Depth 给出了普适（但不绝对）的经验：
When in doubt, use rems for font size, pixels for borders, and ems for most other properties.
Bulma 的 样式，是符合上述规则的。对于线段式的样式（比如 border 等），用 px 能更精确地控制线的样子。对于诸如 padding 等跟间隔相关的，用 em 可以跟内容契合。我认为 border-radius 这种即可以用 em 也可以用 px，视你是否想让圆角跟着内容大小变化。
应用实例：
用相对值方便做不同大小的 panel 设计：