CSS rex、rlh、ric等根家族单位简介
内容提要
文章介绍CSS新增的根元素单位：rcap（根元素大写字母高）、rch（根元素数字0宽）、rex（根元素x高度）、ric（根元素“水”字宽）、rlh（根元素行高）。这些单位自2023年起陆续获浏览器支持，可用于标题内边距、图标高度、验证码输入框宽度、中文输入框宽度及段落间距等场景。作者认为现有单位已够用，这些新单位多非必需，了解即可。
延伸解读
根单位家族与rem的关系
文章从最熟悉的rem单位说起，指出rem自IE9起就被支持，是移动端弹性布局的常用单位。而rcap、rch、rex、ric、rlh等新单位同样基于根元素，但分别对应大写字母高、数字0宽、x高度、汉字“水”宽和行高。它们扩展了根相对单位的维度，让开发者能更精细地控制与文字相关的尺寸。
浏览器支持时间线
这些新单位并非同时出现。Chrome 111、Safari 16.4和Firefox 120从2023年开始支持rcap、rex、ric等；rch和rex的兼容性一致，但rch在Safari 17.2和Firefox 147才支持；rlh的兼容性反而比rex、rch更好。了解支持时间有助于判断能否在生产环境使用。
实际应用场景举例
文章通过AI生成的案例展示了这些单位的用途：用1rcap设置标题上下内边距，用1rex匹配行内图标高度，用6rch设定6位验证码输入框宽度，用20ric限制中文输入框容纳20个汉字，用1.5rlh控制段落间距。这些例子说明它们能简化与文字尺寸相关的布局计算。
作者观点：非必需，了解即可
作者认为，尽管CSS新单位层出不穷，但现有单位已足够应对大多数场景，这些根单位大多并非不可替代，因此无人问津。文章建议读者了解其含义即可，不必深入展开。这反映了对新特性保持关注但按需选用的务实态度。
Q&A
CSS中rcap、rch、rex、ric、rlh这些根单位分别代表什么？
rcap表示根元素字体对应的大写字母高度；rch表示根元素数字0的宽度；rex表示根元素字体的x-height（小写字母x高度）；ric表示根元素字体中“水”字符的宽度；rlh表示根元素的行高计算值。
这些新的CSS根单位从什么时候开始被浏览器支持？
从2023年起陆续获得支持：Chrome 111和Safari 16.4于2023年3月支持，Firefox 120于2023年11月支持。但部分单位如rch和rex的兼容性更晚，Safari 17.2（2023年12月）和Firefox 147（2026年1月）才支持。
这些根单位在实际开发中有哪些应用场景？
可用于标题上下内边距（如padding-block: 1rcap）、行内图标高度（如height: 1rex）、6位数字验证码输入框宽度（如width: 6rch）、中文评论框宽度（如width: 20ric）以及段落间距（如margin-block: 1.5rlh）等。
ric单位有什么特殊之处？
ric是与中文环境密切相关的单位，表示根元素字体中“水”字符占据的宽度。由于中文字体几乎都是等宽，因此可以用它来预估一段纯中文字体占据的宽度。
作者对这些新CSS根单位的态度是什么？
作者认为目前的CSS单位已经够用，这些新单位大多不是必须或不可替代的，因此大多无人问津，没有展开介绍的必要，了解即可。
rem单位与这些新根单位有什么关系？
rem是大家最熟悉的CSS根单位，从IE9就开始支持，代表根元素的font-size。新根单位是在rem基础上扩展的，将目前所有与文字相关的CSS相对单位都囊括了，如rcap、rch、rex、ric、rlh等。
