CSS中，单位分为两类
- 绝对单位：无论其他相关的设置怎么变化，绝对单位指定的值是不会变化的；
-
相对单位：没有固定的度量值，是由其他元素尺寸来决定的相对值。
注意：此处的相对指当前元素的字号（
font-size
viewport
绝对单位有：
| 单位 | 简介 |
|---|---|
| px | 像素 (计算机屏幕上的一个点)，1px = 1/96in |
| pt | 磅 (Points) ，1 pt = 1/72 in |
| pc | 12 点活字（Picas），1pc = 12pt = 1/6in |
| in | 英寸（Inches），1in = 96px = 2.54cm |
| cm | 厘米（Centimeters），1cm = 96/2.54px |
| mm | 毫米（Millimeters），1mm = 1/10cm |
| q | Quarter-millimeters，1q = 1/4mm |
注：绝对单位通常使用在打印方面。
相对单位有：
| 单位 | 简介 |
|---|---|
| % | 百分比，相对于父元素的宽度或者字体大小 |
| em | 相对于当前对象内文本字体的大小，1em = 当前字体的大小，2em = 2*当前字体的大小 |
| rem | （root em）,相对于html标签的字体大小 |
| ex | 当前字体环境中x字母的高度，一个 ex 是一个字体的 x-height (x-height 通常是字体尺寸的一半。) |
| ch | 当前字体环境中0数字的高度 |
| vw | 1%视口（浏览器可视区域）的宽度 |
| vh | 1% 视口（浏览器可视区域）的高度 |
| vmin | 1% 视口（浏览器可视区域）宽度和高度中较小的尺寸 |
| vmax | 1% 视口（浏览器可视区域）宽度和高度中较大的尺寸 |
浏览器兼容性
| 单位 | chrome | IE | Firefox | Safari | opera |
|---|---|---|---|---|---|
| 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| 4.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| 20.0 | 9.0* | 19.0 | 6.0 | 20.0 |
| 26.0 | 不支持 | 19.0 | 不支持 | 20.0 |
重要单位详解
1、
%
相对于父元素相同属性的大小，%可以说是属性的值吧，但是可以看做长度单位来使用，因此列出。
-
%
设置字体大小，则是相对于父元素的字体大小计算
大多数浏览器中
<html>
<body>
100%
html{ font-size: 100%; } body {font-size: 100%;} /* 100% = 1em = 16px = 12pt */ -
%
设置非字体尺寸（如宽和高），基于具有相同属性的父元素的长度值
拓展：
确认父元素（relative、absolute、float、fixed、static）
1、static、relative、float元素，均符合HTML树形结构
2、absolute是离它最近的定位元素（relative、absolute、fixed）元素或者body（没找到定位元素）
3、fixed元素是视口
3、
em
基于当前元素字体尺寸
html {
font-size: 14px;
}
div {
font-size: 1.2em;
line-height: 1.5em;
}
<body>
<div> font-size:16.8px;line-height:25.2px;
<div> font-size:20.16px;line-height:30.24px;
<div> font-size:24.192px;line-height:36.288px;</div>
</div>
</div>
</body>
4、
rem
基于
html
字体尺寸
html {
font-size: 14px;
}
div {
font-size: 1.2rem;
line-height: 1.5rem;
}
<body>
<div> font-size:16.8px;line-height:25.2px;
<div>font-size:16.8px;line-height:25.2px;
<div>font-size:16.8px;line-height:25.2px;</div>
</div>
</div>
</body>
注意：3&4中示例在chrome浏览器上显示font-size:18px;line-height:27px;，但实际计算是根据16.8px来的，Firefox无此问题。
5、
ex
和
ch
ex
和
ch
单位，依赖于当前字体
font-family
和字体大小
font-size
。
-
ex
x
-
ch
CSS单位总结
7、
vw
与
vh
如果项目中要使用视口（
viewport
）的宽度或者高度，而不是父元素的宽度或者高度，那么这时候就需要
vw
和
vh
出场了。
1vw = 1%的视口宽度
1vh = 1%的视口高度
//假设视口的宽度为750px，高度为1400px,那么：
1vw = 750px / 100 = 7.5px
1vh = 1400px / 100 = 14px
应用场景：
1、任意元素高度与屏幕高度一致：
// 以前做法
.test{ height: 100%}
html,body{height:100%}
// 现在做法：
.test{ height: 100vh}
2、子元素大小根据浏览器改变而不是父元素
3、响应字体大小
// 现在做法：
.test{ font-size: 100vh}
4、响应垂直居中
.test {
width:60vw;
height:60vh;
margin: 20vh auto;
}
5、等列宽
.colum-1 {
float: left;
width: 50vw;
}
.colum-2 {
float: left;
width: 30vw;
}
.colum-3 {
float: left;
width: 20vw;
}
注：IE10＋ 和现代浏览器都支持这两个单位。
9、
vmin
和
vmax
这两个单位是针对vw和vh：
-
vmin
vw
vh
-
vmax
vw
vh
注：
-
IE10+
vmin
- 除IE不支持
vmax
参考网站：
https://segmentfault.com/a/1190000004043937
https://www.w3cplus.com/css/simplify-your-stylesheets-with-the-magical-css-viewport-units.html
http://fittextjs.com/