在 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 和 %；
- 小的组件和模块可混合使用；
网友评论