【深入理解CSS】相对单位

相对单位等广泛用途

响应式设计：样式能够根据浏览器窗口等大小有不同的“响应”。
相对单位就是CSS来解决这种问题的一种工具，我们可以基于窗口大小来等比例地缩放字号，而不是固定的像素。或者将网页上任何大小都相对于基础字号来设置，只用一行代码就能缩放整个网页。

em和rem

💡em
若当前元素的字号为16px，那么1em就是16px，2em为32px，即浏览器会根据相对单位计算出绝对值。
当设置padding、height、width、border-radius等属性时，em会很方便。

如上图，定义一个元素的大小，然后只需要改变字号就能整体缩放元素。
💡rem
在文档中，根结点啥其他元素的祖宗节点。根结点有一个伪类选择器（：root），用来选中它自己。
rem是root em的缩写，是相对于根元素的单位。不管在文档内的什么位置使用rem，都会有相同的计算值。

一般来讲，用rem设置字号，px设置边框，em设置其他大部分属性（内外边距、圆角等）

构造响应式面板

利用媒体查询改变根元素的字号。这样就能基于不同用户的屏幕尺寸，渲染出不同大小的面板。

视口的相对单位

除了em和rem，CSS内还有一种相对单位，即相对于浏览器视口定义长度的相对单位。
 vh：视口高度的 1/100。
 vw：视口宽度的 1/100。
 vmin：视口宽、高中较小的一方的 1/100。
 vmax：视口宽、高中较大的一方的 1/100。
💡使用calc（）定义字号
calc函数内可以对两个及以上的值进行基本运算。

:root {
 font-size: calc(0.5em + 1vw);
}

使用如上设置，可以使字体平滑地缩放，而且0.5em又保证了最小字号。

无单位的数值和行高

💡line-height
💡z-index（盒子在当前堆叠上下文中的堆叠层级）
💡font-weight（100-900之间，400等于normal，700等于bold）

自定义属性

在CSS中内可以声明一个变量，为它赋值，然后在样式表的其他地方引用这个值，可以减少重复和修改。

:root {
 --main-font: Helvetica, Arial, sans-serif;
 --brand-color: #369;
} 
p {
 font-family: var(--main-font);
 color: var(--brand-color);
}

同时，你也可以在后面加上另一个参数以提供备用值。

:root {
 --main-font: Helvetica, Arial, sans-serif;
 --brand-color: #369;
} 
p {
 font-family: var(--main-font, sans-serif);
 color: var(--secondary-color, blue);
}

动态改变自定义属性

:root {
 --main-bg: #fff;
 --main-color: #000;
} 
.panel {
 font-size: 1rem;
 padding: 1em;
 border: 1px solid #999;
 border-radius: 0.5em;
 background-color: var(--main-bg);
 color: var(--main-color);
} 
.panel > h2 {
 margin-top: 0;
 font-size: 0.8em;
 font-weight: bold;
 text-transform: uppercase;
}
.dark {
 margin-top: 2em;
 padding: 1em;
 background-color: #999;
 --main-bg: #333;
 --main-color: #fff;
}

自定义属性基于当前变量值，产生了两种不同颜色的面板。