CSS中是否存在相对于容器而非视口的长度单位？

结论 #

完全可以实现，CSS 已提供专门的容器相对单位，配合容器查询功能即可实现子元素样式相对于父容器尺寸动态计算的效果，无需依赖JavaScript。

可用的容器相对单位 #

你可以根据需求选择对应的单位：

• cqw：等于所属容器宽度的1%
• cqh：等于所属容器高度的1%
• cqi：等于所属容器内联方向尺寸的1%（水平书写模式下等同于容器宽度，垂直书写模式下等同于容器高度）
• cqb：等于所属容器块级方向尺寸的1%（水平书写模式下等同于容器高度，垂直书写模式下等同于容器宽度）
• cqmin：取cqi和cqb中更小的那个值
• cqmax：取cqi和cqb中更大的那个值

具体实现示例 #

针对你给出的DOM结构，实现代码如下：

<div class="wrapper">
   <p>Hello, world!</p>
</div>

/* 第一步：将外层div声明为查询容器，指定参考维度 */
.wrapper {
  container-type: inline-size; /* 基于内联方向（默认是宽度）计算单位，也可以设置为size同时参考宽高 */
  width: 600px; /* 你可以任意修改这个容器的尺寸，子元素p的样式会自动同步变化 */
  height: 300px;
  border: 1px solid #eee;
}

/* 第二步：给p标签直接使用容器单位设置样式即可 */
.wrapper p {
  font-size: 4cqw; /* 容器宽度为600px时，字体大小为24px；容器宽度变为300px时，字体大小自动变为12px */
  width: 80cqw; /* 宽度始终占容器的80% */
  padding: 2cqw; /* 内边距为容器宽度的2% */
  margin: 3cqh auto; /* 上下外边距为容器高度的3% */
}

注意：必须给父容器显式声明container-type属性，否则子元素的容器单位会向上查找最近的已声明为容器的祖先元素，无对应祖先时会默认参考视口尺寸。

旧浏览器兼容方案 #

如果需要兼容不支持容器查询的极旧版本浏览器，可以用以下替代方案：

• 宽高、边距、定位类属性可以直接使用百分比单位，默认参考父容器对应尺寸（注意垂直方向的margin、padding百分比默认参考父容器宽度而非高度）
• 字体大小类属性可以通过CSS calc() 配合百分比，或者少量JavaScript动态计算实现

内容的提问来源于stack exchange，提问作者StackOverflowNewbie