(1) CSS中常用的长度单位

我们先来温习下常用的css单位

% -- 百分比
in -- 寸
cm -- 厘米
mm -- 毫米
pt -- point，大约1/72寸
pc -- pica，大约6pt, 1/6寸
px -- 屏幕的一个像素点
em -- 继承的font-size，比如父元素 100px，子元素 1em = 100px
ex -- font-size的 x-height 值，为小写字母x的高度，相当于 font-size 的一半

重点：em 和 %

.box{
    line-height: 1.3em;
}

元素的行高是当前元素继承的font-size的1.3倍

.box{
    line-height: 130%;
}

元素的行高是当前元素继承的font-size的130%倍，等同于1.3em

(二)、CSS3新引入的长度单位

ch -- 字符0(零)的宽度

rem -- 根元素(html元素)的font-size
什么意思呢？
比如，根元素html的字体大小是100px，那么，根元素下面的元素设置的rem，都是 1rem = 100px。
rem的初始值是16px，也就是说在没有设置根节点的 font-size时候，1rem = 16px
切记，是相对于根元素html，如果设置body，则不会起作用

谨记：vw和vh只相对于浏览器可视区域，即 window.innerHeight，window.innerWidth
vw -- 浏览器可视区域， 1vw 等于 浏览器可视区域宽度的 1%
vh -- 浏览器可视区域， 1vh 等于 浏览器可视区域高度的 1%

vmin -- vw和vh中较小的那个
vmax -- vw和vh中较大的那个

比如浏览器宽/高 设置为 1000px/600px

那么，

2vmin = 600*2/100 = 12px
2vmax = 1000*2/100 = 20px