CSS 拥有42种单位
最近因网站项目需求，我接触到了CSS单位“dvh”。此前从未留意过这个单位的存在，于是开始梳理自己遗漏的其他单位。
初学HTML/CSS时，我们仅掌握这9种常用单位：
px、%、em、ex、cm、mm、in、pt 和 pc
如今显然已扩展至42种：
px、%、em、ex、cm、mm、in、pt、pc、
vh、vw、rem、vmin、vmax、lvh、lvw、
swh、svw、svb、svi、dvh、dvw、dvb、dvi、
dvmin、dvmax、Q、cqw、cqh、cqi、cqb、
cqmin、cqmax、ch、rch、lh、rlh、cap、rcap、ic、ric、rex
其中部分属性似乎非常实用，以下是所有属性的简要概述：
px
像素，绝对长度单位。
%
百分比，相对单位。
em
元素自身字体大小。若字体为12px，则1em=12px。
rem
与em相同，但基于根元素的字体大小。
ex
相对于当前字体中字母“x”的小写高度。示例：font-size: 2ex;
cm
表示厘米长度。示例：width: 5cm;
mm
表示毫米长度。示例：height: 10mm;
in
表示英寸长度(1in = 2.54cm)。示例：border: 1in solid black;
pt
表示点单位长度(1pt = 1/72英寸)。示例：font-size: 12pt;
pc
表示派卡单位长度(1pc = 12pt)。示例：width: 5pc;
vh
表示视口高度的百分比(1vh = 视口高度的1%)。示例：height: 50vh;
vw
表示视口宽度的百分比(1vw = 视口宽度的1%)。示例：width: 75vw;
rem
相对于根元素的字体大小()。示例：font-size: 2rem;
vmin
表示视口较小维度(宽度或高度)的百分比。示例：font-size: 5vmin;
vmax
表示视口较大维度(宽度或高度)的百分比。示例：padding: 3vmax;
lvh
基于页面加载时可能出现的最大视口高度。示例：height: 100lvh;
lvw
基于页面加载时可能出现的最大视口宽度。示例：width: 100lvw;
swh
基于可能出现的最小视口高度。示例：height: 100swh;
svw
基于可能出现的最小视口宽度。示例：width: 100svw;
svb
基于最小块尺寸(取决于书写模式)的小视口块尺寸。示例：block-size: 80svb;
svi
基于最小内联尺寸(取决于书写模式)的小视口内联尺寸。示例：inline-size: 80svi;
dvh
动态视口高度，随视口尺寸调整(如键盘弹出时)。示例：height: 100dvh;
dvw
动态视口宽度，随视口尺寸调整。示例：width: 100dvw;
dvb
动态视口块尺寸，在块方向动态调整。示例：block-size: 90dvb;
dvi
动态视口内联尺寸，沿内联方向动态调整。示例：inline-size: 90dvi;
dvmin
dvh与dvw中较小值，动态调整。示例：gap: 2dvmin;
dvmax
dvh与dvw中较大的值，动态调整。示例：margin: 3dvmax;
Q
代表四分之一毫米(1Q = 1/4mm)。示例：border-width: 4Q;
cqw
容器查询宽度，相对于查询容器的宽度。示例：width: 50cqw;
cqh
容器查询高度，相对于查询容器的高度。示例：height: 40cqh;
cqi
容器查询内联尺寸，相对于查询容器的内联尺寸。示例：max-width: 60cqi;
cqb
容器查询块尺寸，相对于查询容器的块尺寸。示例：max-height: 60cqb;
cqmin
基于容器的cqi与cqb取较小值。示例：padding: 5cqmin;
cqmax
基于容器的cqi与cqb取较大值。示例：border-radius: 5cqmax;
ch
相对于当前字体中字符“0”的高度。示例：width: 20ch;
rch
相对于根元素的ch单位。示例：line-height: 1.5rch;
lh
相对于当前元素的行高。示例：margin-bottom: 1lh;
rlh
相对于根元素的lh单位。示例：height: 2rlh;
cap
相对于当前字体大写字母的高度。示例：max-height: 3cap;
rcap
相对于根元素的cap单位。示例：padding-top: 2rcap;
ic
相对于当前字体中“?”(水)汉字的宽度。示例：column-width: 5ic;
ric
相对于根元素的 ic 单位。示例：grid-gap: 1ric;
rex
相对于根元素的 ex 单位。示例：height: 2rex;
在开发我的免费网站构建器时，实际上从未用到全部单位——坦白说大概只用到20%。
但用户偶尔会要求支持某些单位，目前最常被提及的是Em和Rem，我很快会添加支持。
CSS中42种单位看似繁复，但回溯至1996年(近30年前！)初创时仅有8-9种单位。如今这42种单位各具价值，在我看来在特定场景下都具有合理性。
注释：
我认为规范中明确指出像素(px)是相对单位！ 只有那些对应物理长度单位的度量(如毫米、厘米、英寸、点、字号、Q等——可能还有遗漏)才被视为绝对单位，其余所有单位都相对其他基准存在。
最初px是通过屏幕分辨率(如px/in或px/cm)与绝对长度挂钩的，但我隐约记得规范曾因高分辨率屏幕而弱化这种关联，转而将其与像素尺寸挂钩——前提是屏幕需达到某种假设分辨率(不同于实际分辨率)，这听起来反而像是px最终成了绝对单位。除非考虑到设备可自由声明分辨率，因此它本质上仍是相对的！
当然这一切可能仅是推测，实际规范或许确实以物理设备像素为准——但观察结果至少能证明现有实现方式与规范存在偏差… (那样的话就毫无意义了)
总之，我隐约记得某处提示过：干脆别用像素单位，改用点或毫米更妥当。或者用Q单位——因为1Q < 1pt < 1mm < 1pc < 1cm。
我认为标准文本中还有相当一部分内容专门用于定义何时x等于1ex、何时M等于1em (顺便说一句，你这里重复了两次rem)这取决于你定义的具体内容，否则像font-size: 1em这样的设置就显得多余了。而font-size: 0.9em若采用奇怪的定义方式，会趋近于零，因此它本质上是相对于下一层外层元素的字号来定义的(不太确定，毕竟时隔已久)。百分比单位也类似，但同样存在关于“百分比基准”的特定规则。
不过我此前并不知晓Q单位、各类rxx、cqx、dvx及其衍生单位(虽然实际应用这些单位时，可能需要查阅不同@media环境下的具体定义)。非常感谢！
