不能用 calc() + vw 实现父容器相对宽度，因为 vw 基于视口而非父容器；真正响应父宽的是 width: 100%、flex: 1（flex-basis: 0）和 grid fr 单位；css 变量仅作静态系数，需配合 js 或媒体查询才能动态控制比例。

直接用 calc() + vw 不行，因为 vw 是视口单位，不是父容器单位

很多人第一反应是写 width: calc(var(--ratio) * 1vw)，但这是错的——vw 基于整个视口宽度，和父容器毫无关系。CSS变量本身不参与计算上下文，它只是静态值替换，无法感知父级尺寸。所以不能靠变量“自动读取父宽”。

width: 100% 或 flex: 1 才是真·父容器相对单位

真正能响应父容器宽度的，只有原生布局机制：

• width: 100%：块级子元素默认行为，前提是父容器有明确宽度（比如 width: 100% 或 max-width + width: 100%）
• flex: 1：在 display: flex 父容器中，子项用 flex: 1（等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0）才能均分剩余空间
• grid 的 fr 单位：比如 grid-template-columns: 1fr 2fr，比例基于网格容器可用宽度

这些方式都不依赖 CSS 变量，但它们才是浏览器真正理解的“父容器相对”逻辑。

想用变量控制比例？只能配合 JS 动态注入或预设断点

如果非要用 CSS 变量表达“父宽的 60%”，目前只有两种现实路径：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• JS 注入：监听父容器 resize，用 getBoundingClientRect().width 算出当前宽度，再通过 element.style.setProperty('--parent-width', w + 'px') 写入变量，然后用 calc(var(--parent-width) * 0.6)
• 媒体查询预设：按常见断点定义变量，比如 @media (min-width: 768px) { :root { --ratio: 0.75; } }，再结合 width: calc(100% * var(--ratio)) ——但这是静态比例，不随父容器实时变化

注意：calc(100% * var(--ratio)) 中的 100% 是相对于父容器的，这才是关键；变量只提供乘数，不提供基准。

为什么 flex-basis: 0 比 flex-basis: 100% 更适合自适应

这是最容易被忽略的细节：

• flex-basis: 100% 让子项初始就占满父容器，没“剩余空间”，flex-grow 完全失效
• flex-basis: 0（即 flex: 1 的默认行为）把起点归零，所有空间都交给 flex-grow 分配，才能真正响应兄弟元素增减或父容器缩放
• 尤其当父容器是 max-width 限制时，flex-basis: 0 能保证子项始终按比例撑满可用宽度，而不是卡死在某个固定像素值上

变量在这里只能当开关或系数用，真正的自适应锚点永远在布局模型本身——不是变量，而是 flex、grid 或百分比的计算上下文。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！