【CSS】相对长度单位 绝对长度单位,vw/vh , rem等

相对单位：

（一般用于对屏幕分辨率兼容较高的项目，可以使用不同设备的大小）

单位	描述
em	ems始终相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
ex	依赖于英文字母小 x 的高度
ch	数字 0 的宽度
rem	rem始终相对的是 ： 根元素（html）的 font-size
vw	全称：viewpoint width， 相对于浏览器窗口的宽度，1vw=视窗宽度的1%； 比如浏览器窗口是 1920 * 970;          1vw=19.2
vh	全称：viewpoint height，相对于浏览器窗口的高度，1vh=视窗高度的1% 比如浏览器窗口是 1920 * 970;          1vh=9.7
vmin	vw和vh中较小的那个。
vmax	vw和vh中较大的那个。
%	相对于父元素的百分比

关于 rem ， 有时候可以在页面顶部写个JS 来设定一个比较好计算的值，比如：

效果图：

---

绝对单位：

（一般用于对固定设备或软件的项目，不会受显示器，分辨率等的影响）

单位	描述
cm	厘米
mm	毫米
in	英寸 (1in = 96px = 2.54cm)
px *	像素 (1px = 1/96th of 1in) 、计算机屏幕上的一个点
pt	磅 ，point，大约1/72英寸； (1pt = 1/72in)
pc	pica，大约6pt，1/6英寸；12 点活字 (1 pc 等于 12 点)， (1pc = 12 pt)

---

浏览器支持：

长度单位	Chrome	IE	Firefox	Safari	Opera
em, ex, %, px, cm, mm, in, pt, pc	1.0	3.0	1.0	1.0	3.5
ch	27.0	9.0	1.0	7.0	20.0
rem	4.0	9.0	3.6	4.1	11.6
vh, vw	20.0	9.0	19.0	6.0	20.0
vmin	20.0	9.0*	19.0	6.0	20.0
vmax	26.0	不支持	19.0	不支持	20.0