CSS rex、rlh、ric等根家族单位简介
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12429
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。
一、从rem单位说开去
说起CSS根单位，大家最熟悉的莫过于 rem 单位。
从IE9浏览器就开始支持。
是目前CSS领域最常用的CSS单位之一，尤其在移动端的弹性布局中。
很多人不知道的是，从Chrome 111（2023年3月）、Safari 16.4（2023年3月）、Firefox 120（2023年11月）开始，还支持了其他一系列的根元素单位，五花八门，将目前基于所有与文字相关的CSS相对单位都囊括了。
具体参见：
rcap
等于根元素字体字号对应的“大写字母的高度”。
CSS的cap是个比较晚支持的CSS单位，中文场景下此单位出场机会不大，因为表示的是英文大写字母的高度。
其兼容性如下（单位cap和rcap兼容性一致）：
rch
ch表示字符0的宽度，自然，rch就表示当前根元素数字0，Unicode字符 U+0030的宽度。
ch是个IE时代的CSS单位，但是rch却比rlh支持的晚，Safari 17.2（2023年12月）、Firefox 147（2026年1月）才支持.
rem
代表根元素（通常是 <html>）的 font-size。在根元素的 font-size 属性内使用时，代表其初始值。浏览器常见默认值为 16px，但用户设置可能改变该值。
rex
等于根元素 font 的 x-height（小写字母x高度）。
rex的兼容性和rch是一样的。
ric
ic这个单位我之前也介绍过，这是与中文环境，东亚语言密切相关的CSS单位。表示字符“水”所占据的宽度。中文字体几乎都是等宽，因此，这个单位可以预估一段纯中文字体占据的宽度。
ric自然就表示根元素字体上“水”这个字符占据的宽度了。
单位ic是2022年各大浏览器开始大规模支持的，目前算是一个可以放心使用的单位了。
至于单位ric的兼容性，则和rex他们一致。
rlh
CSS lh和rlh都是新CSS单位，与行高的计算值相关。
然后出乎意料的，lh虽然是新单位，但是rlh的兼容性却比rex、rch这些老单位的根元素表示要好。
二、根字体单位实战案例
苦思冥想，想不到什么好的实战案例。
突然想到了一个办法，问AI。
这是AI提供的案例：
html {
font-family: system-ui, sans-serif;
font-size: 16px;
line-height: 1.6;
}
/* 标题：上下内边距跟随大写字母高度 */
h1 {
padding-block: 1rcap;
}
/* 正文行内图标，高度匹配小写x高度 */
.inline-icon {
height: 1rex;
}
/* 6位数字验证码输入框 */
.code-input {
width: 6rch;
}
/* 中文评论框，最多容纳20个汉字 */
.cn-input {
width: 20ric;
}
/* 段落间距，基于根行高，全局垂直韵律 */
p {
margin-block: 1.5rlh;
}
嗯……怎么说呢？感谢都是非root根元素单位的应用场景。
算了算了，大家了解下吧，至少下次看到这些单位知道是什么意思吧。
三、就这么结束啦
关于CSS新单位，几个月前也介绍了一波，有兴趣可以访问“CSS新单位dvh、lvmin、vi、cqb等初解”这里了解。
虽然出了很多CSS新单位，但由于目前的CSS单位够用了，且这些单位大都不是必须不可替代的。
因此，大多都无人问津。
有没有展开介绍的必要。
就这样吧，我们下个视频再见。
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12429
（本篇完）
相关文章- 基于vw等viewport视区单位配合rem响应式排版和布局 (0.443)
- CSS新单位dvh、lvmin、vi、cqb等初解 (0.342)
- 等宽字体在web布局中应用以及CSS3 ch单位嘿嘿 (0.253)
- 小tips: 纯CSS实现打字动画效果 (0.177)
- 时隔两年，Chrome也支持round等CSS数学函数了 (0.177)
- 视区相关单位vw, vh..简介以及可实际应用场景 (0.076)
- 理解SVG viewport,viewBox,preserveAspectRatio缩放 (0.076)
- 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 (0.076)
- CSS值类型文档大全 (0.076)
- css行高line-height的一些深入理解及应用 (0.038)
- 研究了下Houdini中的CSS Layout API (RANDOM - 0.038)