相对单位

CSS 视窗单位

可以相对于浏览器视窗尺寸来设置元素的大小，而且这个大小是动态的，会随着浏览器视窗大小自动调整

默认视窗单位：

vw ：表示根元素（html）宽度的百分比，1vw 等于浏览器视窗宽度的 1%
vh ：表示根元素（html）高度的百分比，1vh 等于浏览器视窗高度的 1%
vmin ：表示浏览器视窗宽度和高度的最小值
vmax ：表示浏览器视窗宽度和高度的最大值

大视窗（Large Viewport） ：假设任何 UA 接口都是收缩的，例如浏览器工具栏、标签栏和地址栏都是不可见的状态

大视窗单位：

lvw 等于浏览器视窗大尺寸的宽度的 1%
lvh 等于浏览器视窗大尺寸的高度的 1%
lvmin 等于浏览器视窗大尺寸的宽度或高度中的较小值，即 lvw 或 lvh 较小的那个值
lvmax 等于浏览器视窗大尺寸的宽度或高度中的较大值，即 lvw 或 lvh 较大的那个值

小视窗（Small Viewport） ：假设任何 UA 接口都是扩展的，例如浏览器工具栏、标签栏和地址栏都是可见的状态

小视窗单位：

svw 等于浏览器视窗小尺寸的宽度的 1%
svh 等于浏览器视窗小尺寸的高度的 1%
svmin 等于浏览器视窗小尺寸的宽度或高度中的较小值，即 svw 或 svh 较小的那个值
svmax 等于浏览器视窗小尺寸的宽度或高度中的较大值，即 svw 或 svh 较大的那个值

动态视窗会考虑 UA：

当动态工具栏展开时，动态视口等于小视窗的大小
当动态工具栏收缩时，动态视口等于大视窗的大小

动态视窗单位：

dvw 表示动态视窗宽度的 1%
dvh 表示动态视窗高度的 1%
dvmin 表示动态视窗宽度或高度中的较小值，即 dvw 或 dvh 中较小的那个值
dvmax 表示动态视窗宽度或高度中的较大值，即 dvw 或 dvh 中较大的那个值

CSS 容器查询单位

cqw ：查询宽度，相对于查询容器宽度计算，即 1cqw 等于查询容器宽度的 1%
cqh ：查询高度，相寻于查询容器高度计算，即 1cqh 等于查询容器高度的 1%
cqmin ：查询最小值，是查询内联轴尺寸 cqi 或查询块轴尺寸 cqb 中较小的那个值
cqmax ：查询最大值，是查询内联轴尺寸 cqi 或查询块轴尺寸 cqb 中较大的那个值

字体相对长度单位

本地字体相对长度单位：

em ：如果在元素的 font-size 属性中使用 em 单位，则相对于元素父元素的 font-size 计算，如果在元素的其他属性（非 font-size）中使用 em 单位，则相对于元素自身的 font-size 计算，例如 width 属性
ex ：等于第一个可用字体的 x-height ，即小写字符 x 的高度
ch ：数字 0 （U+0030）的宽度
cap ：等于第一个可用字体的使用帽高度（cap-height），它大约等于大写拉丁字母的高度
lh ：等于元素的行高（line-height ）
ic ：是 ch 的东方版本。它是 CJK （中文、日文和韩文）表意文字 水 （U+6C34）的大小，因此可以粗略地解释为“表意文字计数”。在不可能或不实际确定表意文字的大小情况下，必须假定为 1em

根字体相对长度单位：

rem 、rex 、rcap 、rch 、ric 和 rlh