在 CSS 中，lh 和 rlh 是与行高（line height）相关的长度单位，这些单位在 CSS Values and Units Level 4 规范中被引入。这些单位允许开发者根据元素的行高来定义尺寸，从而实现更加灵活和响应式的布局。
-
lh单位：lh代表当前元素的“行高单位”。具体来说，1lh等于元素的line-height属性的值。- 这个单位非常有用，因为它允许你根据文本的行高来定义其他尺寸，如边距、填充或元素的高度。这可以确保文本与其他元素之间的空间关系在改变行高时仍然保持一致。
- 例如，如果你设置了一个元素的
line-height为20px，那么1lh就等于20px，2lh就等于40px，以此类推。
-
rlh单位：rlh代表“根元素的行高单位”。与lh类似，但它是基于根元素（通常是<html>）的line-height属性值。- 使用
rlh可以确保整个页面中的元素与根元素的行高保持一致的关系，从而实现全局的响应式布局。 - 例如，如果根元素的
line-height是1.5，并且字体大小是16px，那么1rlh就相当于24px（因为1.5 * 16px = 24px）。
这些单位在创建响应式布局时特别有用，因为它们允许元素的大小和间距根据文本的行高动态调整，从而确保在不同设备和屏幕尺寸上都能保持一致的视觉体验。
然而，需要注意的是，这些单位在某些旧的浏览器版本中可能不受支持。因此，在使用它们之前，最好检查目标浏览器的兼容性情况，并考虑使用回退策略或降级方案来确保网站在所有浏览器上都能正常工作。
标签：rlh,元素,lh,height,单位,行高,CSS From： https://www.cnblogs.com/ai888/p/18643044