CSS 单位 px、pt、em、rem

在 CSS 语言中总会用到各种单位设置，如：font-size、line-height、height、width 等等。这里会对目前使用到的各种 CSS 单位做简单的分析，主要涉及有 px、pt、em、rem、vh/vw、% 等。

相对单位可以尽可能的让元素按照比例进行缩放，从而保证布局的完整性。

dpi

精度 DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有 DPI 可选。Windows系统默认是 96dpi，Apple系统默认是 72dpi，打印机通常为 300dpi。

px

即像素 Pixels，是一种绝对单位，是一个虚拟长度单位，是计算机系统的数字化图像长度单位。正常情况下取值范围为 9 ~ 512（实际上是无上下限的）。像素是相对于显示器屏幕分辨率而言的，使用该单位的元素，不会因为其它元素的尺寸变化而变化。在做响应式开发的时候，应尽量避免使用 px 作为单位。

pt

即磅 Points，是一种绝对单位，是物理长度单位，等于 1/72 寸。它的取值范围和 px 类似。

1寸是多少呢？1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

pt 和 px 的换算如下：

公式 N(pt) = N(px) * dpi / 72
dpi：windows = 96、mac = 72；
例如：windows 上  1pt = 1px * 96 / 72;
常见如下：
1pt = 2px = 1.3333333333333333px
6pt = 8px = 8px
9pt = 12px = 12px
10pt = 14px = 13.333333333333334px
12pt = 16px = 16px
14pt = 19px = 18.666666666666668px
15pt = 20px = 20px
18pt = 24px = 24px

em

是一种相对单位，参考基准为父节点字体的大小（表示相对于父元素的字体大小），最初是指字母 M 的宽度，故名 em。它的取值范围不宜过大，通常为 0.5 ~ 1.5 左右。如果自身定义了 font-size 则按自身来计算，大部分浏览器默认字体约为 16px，所以 1em = 16px。

同一段 CSS 代码中，相同的 em 值可能实际的显示尺寸都是不一样的，这就是因为 em 是相对于父级字体大小定义的。

公式 N(px) = N(em)/16
当父级的 font-size = 16px 时，对应的 em 如下：
1px = 0.0625em
3px = 0.1875em
5px = 0.3125em
6px = 0.375em
8px = 0.5em
9px = 0.5625em
12px = 0.75em
14px = 0.875em
16px = 1em
18px = 1.125em
20px = 1.25em
24px = 1.5em
32px = 2em
48px = 3em
64px = 4em
72px = 4.5em
80px = 5em
96px = 6em
128px = 8em
256px = 16em

rem

即 root em，和 em 一样，它也是相对长度单位，取值范围也和 em 是一样的。和 em 不同的是，它始终以 body 的 font-szie 为基准值进行计算。它也是 CSS3 新增的一个相对单位。

vh/vw

CSS3 提出了视口百分比（viewport-percentage lengths）的概念，其中包含了 vh、vw、vmin 和 vmax 四个单位，这四个单位都是相对长度单位，类似 % 单位，只不过，明确了它们是是相对浏览器可视区域（Viewport）定义，其取值范围为 0 - 100。

• vh：基于可视区域的高度百分比，如：height: 10vh；
• vw：基于可视区域的宽度百分比，如：width: 10vw；
• vmin 和 vmax：二者都是从宽度或高度重选择最大或最小的百分比；

vh、vw

兼容性一览：

兼容性一览

百分比 %

百分比也是常用的长度单位，它始终相对于父元素对应的属性，即和父级的属性一一对应。如：width: 100% 等于父级宽度的 100%,但不包含父级的 padding；font-size: 120% 等于父级字号的 120%。

计算表达式

calc 是英文单词 calculate（计算）的缩写，是 CSS3 新增的一个功能，用来指定元素的长度。可以使用 calc() 给元素的 border、margin、pading、font-size 和 width 等属性设置动态值。

.el {
  /* 高度为父级的 100% - 48px，特别适合做后台界面那种自动高度伸展效果 */
  height: calc(100% - 48px);
}

总结

• 对于常规布局，可以使用 px 作为单位，如：width: 1200px；
• 对于栅格系统可以使用百分比 % 作为单位，如：20%；
• 对于字号，可以给 body 一个固定值（px），然后其他字号使用 rem 或 em 作为单位；
• 如果确定浏览器的版本比较新，可以考虑使用 vh、vw 等单位；
• 大的页面框架优先使用 px 和 %；
• 小的组件和模块可混合使用；

参考

• px,pt,em换算表 作者 菜鸟教程
• 页面适配之pt、px、em、rem用法和特点 作者 暴走的奶糖
• vh,vw单位你知道多少？ 作者 何大小成