无需额外div，能否直接将font-size设为自身div宽度的百分比？

不行，无法直接在设置了container-type: inline-size的原<div>元素上，通过cqw单位引用它自身的宽度来设置font-size。

原因 #

容器查询单位（如cqw）的规则是：它们会向上查找最近的、设置了容器类型的祖先元素作为尺寸参考，而非使用元素自身的容器属性。当你在元素自身的样式中写3cqw时，浏览器会忽略该元素自己的container-type设置，转而寻找它上层的容器——如果没有上层容器，就会以视口尺寸作为 fallback（但这显然不是你想要的效果）。

可行的替代方案 #

你目前采用的嵌套<div>的方法是纯CSS下最直接的解决方案：

div.mydiv {
  container-type: inline-size;
  /* 可在此设置外层div的宽度等基础样式 */
}

div.mydiv > div {
  font-size: 3cqw; /* 此处cqw会正确引用外层mydiv的宽度 */
}

如果不想增加额外DOM元素，只能借助JavaScript实现动态计算：获取元素宽度后，直接将对应比例的数值赋值给font-size。示例代码：

const myDiv = document.querySelector('div.mydiv');

function updateFontSize() {
  const width = myDiv.offsetWidth;
  myDiv.style.fontSize = `${width * 0.03}px`; // 对应宽度3%的字体大小比例
}

// 初始化执行一次
updateFontSize();
// 窗口尺寸变化时重新计算
window.addEventListener('resize', updateFontSize);

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