弄清楚px、em、rem、vh、vw、vmin、vmax

px

绝对单位，页面按精确像素展示

em

相对单位，相对于父元素的font-size，具有继承性，如果自身设置了font-size按照自身计算（浏览器默认字体是16px，即使1em=16px），整个页面内1em不是一个固定的值。

例如父元素font-size:12px
自身元素设置成：font-size:2em；则自身元素字体就是24px（相对于父元素字体大小）；
但是自身元素设置：width:2em，则自身元素就是48px宽度（相对自身字体大小）

rem

相对单位，相对于根元素html的font-size。

vw

viewpoint width的缩写，视窗宽度，1vw=视窗宽度的1%。
举个例子：浏览器宽度1200px，1vw=12px

vh

viewport height的缩写，视窗高度，1vh=视窗高度的1%。
举个例子：浏览器高度900px，1vh=9px

vmin

取vm 和vh 较小的那个

vmax

取vm 和vh 较大的那个

常见问题

问题1：为什么一开始在css样式中给body设置font-size：62.5%？
答：
font-size=62.5%，1em= 62.5%*16px=10px，有利于换算

问题2：在谷歌浏览器运行以下代码，1em是显示多大的字体？

body{
font-size: 62.5%;
}

p{
font-size:1em; /*我的字体是多大？*/
}

答：
谷歌强制最小字体12px，虽然设置成10px，最终都会显示12px。
即使把html的font-size设置成10px，子元素rem还是以12px为基准进行计算。