设置container:inline-size与max-width后，font-size:2cqw为何仍随窗口增大？

你的问题出在对cqw单位的理解上——cqw不是容器查询单位，而是视口单位，它的大小基于浏览器视口的内联宽度（水平书写模式下就是窗口宽度），和你设置的容器宽度完全无关。

关键概念区分 #

• cqw：全称Viewport Query Width，是视口内联方向宽度的1%，属于视口单位家族（和vw类似，仅适配不同书写模式）。
• cqi：这才是容器查询单位，全称Container Query Inline-size，是你通过container: inline-size声明的容器上下文内联尺寸的1%。

你原本想要基于容器宽度控制字体大小，但误用了视口单位cqw，所以即使容器被max-width:500px限制住宽度，只要浏览器窗口变宽，cqw的计算基准就会变大，字体自然跟着持续增大。

修复方案 #

把段落的font-size从2cqw改成2cqi，这样字体大小就会基于容器的内联宽度计算。当容器宽度达到500px后，字体大小固定为500px × 2% = 10px，不会再随窗口宽度变化。

修改后的代码：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      container: inline-size;      
      max-width: 500px;
      background-color: rgb(213, 213, 213);
      margin: 0 auto; /* 居中容器，方便观察效果 */
    }

    p {
      font-size: 2cqi;
    }
    </style>
  </head>
  <body>
    <div class="container">
      <p>Paragraph with font-size:2cqi, inside container with max-width=500px.</p>
    </div>
</html>

补充说明 #

容器查询相关的单位还有这些，它们才会基于你设置的container上下文计算：

• cqb：容器块方向尺寸的1%
• cqmin：容器内联、块方向尺寸中较小值的1%
• cqmax：容器内联、块方向尺寸中较大值的1%

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