学习自：深入解析CSS
一种使用经验是：用rem设置字号，用px设置边框，用em设置其他大部分属性，尤其是内边距、外边距和圆角（用百分比设置容器宽度）使用无单位的值设置行高。使用自定义属性定义颜色
em
em是最常见的相对长度单位，适合基于特定的字号进行排版。在CSS中，1em等于当前元素的字号
当设置padding、height、width、border-radius等属性时，使用em会很方便。这是因为当元素继承了不同的字号，或者用户改变了字体设置时，这些属性会跟着元素均匀地缩放。
如果声明font-size: 1.2em，会发生什么呢？一个字号当然不能等于自己的1.2倍。实际上，这个font-size是根据继承的字号来计算的。
同时用它指定一个元素的字号和其他属性。这时，浏览器必须先计算字号，然后使用这个计算值去算出其余的属性值。
可能会出现嵌套列表的文字缩小的问题。于是，更好的选择是用rem设置字号
rem
rem是root em的缩写。rem不是相对于当前元素，而是相对于根元素的单位。不管在文档的什么位置使用rem,1.2rem都会有相同的计算值：1.2乘以根元素的字号。
根节点有一个伪类选择器（:root），可以用来选中它自己。这等价于类型选择器html，但是html的优先级相当于一个类名，而不是一个标签。
视口的相对单位
视口——浏览器窗口里网页可见部分的边框区域。它不包括浏览器的地址栏、工具栏、状态栏。
❑ vh：视口高度的1/100。
❑ vw：视口宽度的1/100。
❑ vmin：视口宽、高中较小的一方的1/100（IE9中叫vm，而不是vmin）。
❑ vmax：视口宽、高中较大的一方的1/100
比如，50vw等于视口宽度的一半，25vh等于视口高度的25%。vmin取决于宽和高中较小的一方，这可以保证元素在屏幕方向变化时适应屏幕。在横屏时，vmin取决于高度；在竖屏时，则取决于宽度。
响应式应用
媒体查询，即@media规则，可以指定某种屏幕尺寸或者媒体类型（比如，打印机或者屏幕）下的样式。这是响应式设计的关键部分。
只需要改一行代码就能改变整体的字号
实现字体平滑地缩放
calc()函数支持的运算包括：加（+）、减（−）、乘（×）、除（÷）。加号和减号两边必须有空白
自定义属性（即CSS变量）
声明一个变量，为它赋一个值，然后在样式表的其他地方引用这个值。
变量名前面必须有两个连字符（–），用来跟CSS属性区分。调用函数var()就能使用该变量。
这种方式特别适合反复出现的值，比如颜色值。
定义属性的声明能够层叠和继承：可以在多个选择器中定义相同的变量，这个变量在网页的不同地方有不同的值。
例如，可以定义一个变量为黑色，然后在某个容器中重新将其定义为白色。那么基于该变量的任何样式，在容器外部会动态解析为黑色，在容器内部会动态解析为白色。
可以结合js用来切换主题颜色