1.em是相对于当前元素计算具有继承性，用在依赖字号的属性上，padding、margin、width、height…
2.rem是相对于根元素字号进行计算，用于font-size中，设置字号，不要用在根元素上。
<!DOCTYPE html><html><head><meta charset='UTF-8'><title>em rem vw vh</title><style>html{font-size: 0.625em;}.art{font-size: 1rem;border: 1px solid rgb(211, 125, 20);background: rgb(141, 178, 247);border-radius: 1em;padding: 1.2em;margin: 2em;}.art h1{font-size: 1.3rem;text-align: center;margin: 0.8em 0;}.art p{font-size: 1rem;line-height: 2;}/* 屏幕宽度>=800px,字号放大到14px; */@media screen and (min-width:800px){html{font-size: 1.2em;}.art{background: rgb(224, 248, 4);}}@media screen and (min-width:1000px){html{font-size: 1.5em;}.art{background: rgb(241, 8, 136);}}</style></head><body><div class="art"><h1>2020年中国汽车产销将达2500万辆左右</h1><p> 中国国家发改委新闻发言人孟玮近日表示，预计2020年全年中国汽车产业总体可恢复到上年水平，其中，增加值等主要经济指标好于去年，产销达到2500万辆左右，与上年相当，新能源汽车产销有望超过上年。</p></div></body></html>
em的特点:
em的值不是固定的，具有继承性；
em继承于父类元素font-size字体大小；
rem的特点：
rem根据html根元素计算
如果html根元素没有定义，则根据浏览器默认值16px计算
em和rem的区别：
rem跟随根元素改动而改动;em跟随父元素改动而改动具有继承性
em和rem的应用场景：
一般定义子元素的font-size值用rem；其他元素可以用em
vw是相对视口的宽度而定的，长度等于视口宽度的1/100
vh是相对视口的高度而定的，长度等于视口高度的1/100
vh 和 vw 就是根据窗口的宽高，分成100等份，50vh就表示一半高。