em表示什么长度单位_理解前端尺寸vw、vh、rem、em

之前，一直没有对这几个尺寸实战过，也主要从事与pc端的开发工作，再加上对技术的关注点一直在js上，忽略了css方面的知识。今天呢？在各个大牛blog基础之上，对前端尺寸进行一一讲解。希望能加深自己对其的理解、也能帮助那些想要理解这些知识的爱好者。

em

em 是一个相对长度单位。其相对于当前对象内文本的字体尺寸，。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

• em的值并不是固定的
• em会继承父级元素的字体大小

例子：https://jsbin.com/pafifiz/5/edit?html,css,js,output

其中，浏览器默认尺寸是16px，故body中的font-size: 16 * 62.5%=10px,而#app继承与父级元素10px * 1.2 = 12px，#footer继承与body 10px2=20px;而#app p继承与#app，此时1em=12px，故#app p中的font-size为12px1.2=14.4px

运行js

document.body.style.fontSize='20px';