CSS rex、rlh、ric等根家族单位简介

这篇文章发布于 2026年09月17日，星期四，19:42，归类于 CSS相关。 阅读 59 次, 今日 59 次 没有评论

 

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兼容性一致）：

rcap单位兼容性

rch
ch表示字符0的宽度，自然，rch就表示当前根元素数字0，Unicode字符 U+0030的宽度。

ch是个IE时代的CSS单位，但是rch却比rlh支持的晚，Safari 17.2（2023年12月）、Firefox 147（2026年1月）才支持.

rch的兼容性

rem

代表根元素（通常是 <html>）的 font-size。在根元素的 font-size 属性内使用时，代表其初始值。浏览器常见默认值为 16px，但用户设置可能改变该值。

rex
等于根元素 font 的 x-height（小写字母x高度）。

rex的兼容性和rch是一样的。

ric
ic这个单位我之前也介绍过，这是与中文环境，东亚语言密切相关的CSS单位。表示字符“水”所占据的宽度。中文字体几乎都是等宽，因此，这个单位可以预估一段纯中文字体占据的宽度。

ric自然就表示根元素字体上“水”这个字符占据的宽度了。

单位ic是2022年各大浏览器开始大规模支持的，目前算是一个可以放心使用的单位了。

ic单位兼容性

至于单位ric的兼容性，则和rex他们一致。

rlh
CSS lh和rlh都是新CSS单位，与行高的计算值相关。

然后出乎意料的，lh虽然是新单位，但是rlh的兼容性却比rex、rch这些老单位的根元素表示要好。

rlh单位兼容性

二、根字体单位实战案例

苦思冥想，想不到什么好的实战案例。

突然想到了一个办法，问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

（本篇完）

相关文章
«上一篇
分享到：
标签： , , , , , , , , , , ,


发表评论（目前没有评论）