less无法原生支持容器查询，因其作为预处理器不处理运行时布局；可行方案是js监听容器尺寸并写入css自定义属性，less读取这些变量参与计算或生成多态类名。
Less里没有原生container-query语法，别硬套
Less是预处理器，不处理运行时布局逻辑，@container这类CSS容器查询必须由浏览器在运行时解析执行。Less编译阶段根本看不到元素尺寸或容器状态，强行用.mixin模拟@container规则只会生成静态CSS，完全无法响应容器宽高变化。
常见错误是写这样的Mixin：
.responsive-text(@min: 300px) {
@media (min-width: @min) {
font-size: clamp(1rem, 2.5vw, 1.5rem);
}
}
这本质还是viewport媒体查询，和容器无关——它只认视口宽度，不认父容器尺寸。
用CSS自定义属性+Less变量桥接容器查询逻辑
真正可行的路径是：用JavaScript监听容器尺寸，写入CSS自定义属性；Less负责把变量注入到样式中，复用计算逻辑。关键不是“在Less里实现容器查询”，而是让Less成为CSS变量的组装器。
- JS侧监听容器，设置
--container-width、--container-height等属性 - Less中用
@width: ~"var(--container-width)";读取（注意~""保持字符串原样） - 配合
clamp()或calc()做响应式计算，例如：font-size: clamp(1rem, 0.5vmax, 1.2rem);——这里vmax虽非容器单位，但能随容器缩放间接生效 - 避免在Less里做条件判断：
if (@width > 400px) { ... }无效，Less无运行时判断能力
用data-属性驱动Less生成多态类名
当容器尺寸可枚举（比如只有“small”/“medium”/“large”三档），可用JS打data-container-size="medium"，Less据此生成对应类：
.container[data-container-size="small"] { font-size: 0.8rem; }
.container[data-container-size="medium"] { font-size: 1rem; }
.container[data-container-size="large"] { font-size: 1.2rem; }
这种方案不依赖运行时计算，兼容性好，且Less能静态输出全部分支。但需要JS主动更新data-属性——容易漏掉resize事件或初始渲染时机。
- 务必监听
ResizeObserver而非window.resize，否则容器内部DOM变化不会触发 - Less中不要用嵌套写法生成动态选择器，如
&[data-container-size="@size"]会报错——Less不支持变量插入选择器 - 推荐用
.make-container-classes();函数批量输出，参数为尺寸映射表
复杂点在于容器嵌套与状态同步
一个页面可能有多个独立容器，每个需独立监听、独立设CSS变量。Less本身不管理状态，所有var(--xxx)都靠JS维护。最容易被忽略的是：JS更新变量后，CSS重排是否及时？某些旧版浏览器对style.setProperty()触发重绘有延迟，需手动getComputedStyle()强制刷新。
另外，如果容器本身是display: none或未挂载，ResizeObserver不会触发，变量也不会更新——这比viewport媒体查询更难调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
