1.什么是em
继承祖元素font-size的大小；浏览器的默认字号font-size:16px;font-size属性是可以继承的;则：1em=16px;* em可以设置为宽高，然后通过改变font-size大小来实现改变容器大小
2.rem
因为em只有继承性，后边在设置不同区块的字体的时候就会改变相对模块em的大小，此时，font-size的单位用rem；rem是继承根元素的字体大小，不会被中间其他元素所改变x值；（继承自<html></html>标签中的字体大小值x,默认x=16px;）
3.为什么要用em/rem？
若你的css中有20处使用px来设置的属性。当你使用media query来进行响应式开发时，如果有两个尺寸断点，就要修改20*3=60处！如果使用em/rem，只需要修改1处。只需要修改html元素font-szie，所有使用rem单位的属性都会被修改。在结构中（这里指的是padding，margin，width，height等），仍然使用em单位，这样会使结构组件化，当需要修改某一个组块的时候，直接改变font-size: xx rem;就可以。
视口单位：vh/vw——vmin/vmax
视口：浏览器窗口中用于显示文档的可视区域vh:视口的“初始包含块”的高度的百分之一（1/100）vw:视口的“初始包含块”的宽度的百分之一（1/100）初始包含块：目前先当做是HTMLvmin:宽高中的较小值;vmax:宽高中的较大值;
CSS变量
--color:red;color:var(--color);
