网页设计中经常用到的长度单位：px、em、rem、%、vw、vh、vmin、vmax。我自己没系统学过网页设计，所以对这些概念都一知半解(感谢谷歌，感谢百度...)。平时要修改页面样式，或者添加个Function时才会改改代码，而且大多都是直接复制粘贴的，惭愧惭愧！那今天就抽空整理下这些常用长度单位。
1、px
相对长度单位。px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。
2、em
相对长度单位，这个单位表示元素的font-size的计算值。如果用在font-size 属性本身，它会继承父元素的font-size。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
3、rem
相对长度单位。相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。
4、%
相对长度单位。一般宽泛的讲是相对于父元素，但是并不是十分准确。百分比是针对与该元素的包含块来计算的。
- 对于普通定位元素就是我们理解的父元素
- 对于position: absolute;的元素是相对于已定位的父元素
- 对于position: fixed;的元素是相对于 ViewPort（可视窗口）
5、vw
相对长度单位。viewport width的缩写，视窗宽度，1vw等于视窗宽度的1%。
6、vh
相对长度单位。viewport height的缩写，视窗高度，1vh等于视窗高度的1%。
7、vmin
相对长度单位。相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位。
8、vmax
相对长度单位。相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位。
举个例子：
浏览器视口高度900px，宽度1200px，那么：
1 vh = 900px/100 = 9 px。
1 vw = 1200px/100 = 12 px。
1 vmin = 900px/100 = 9 px。
1 vmax = 1200px/100 = 12 px。
9、绝对长度单位
- in: 寸
- cm: 厘米
- mm: 毫米
- pt: point，点
- pc: pica，派卡
转化关系：1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
注：还有诸如 ex、ch、lh、rlh、vi、vb 等请参考博文：CSS笔记#长度单位 | 余真帆的博客
10、参考文章
1、px、em、rem、%、vw、vh、vm这些单位的区别 - 简书
2、CSS笔记 | 余真帆的博客
3、CSS 长度(Length) - CSS 教程手册（新） - html中文网