弄清楚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为基准进行计算。

推荐阅读更多精彩内容