less 中直接写 100vw 会报错，因 less 将 vw 解析为未定义变量 @vw；应使用转义语法 ~"100vw"，并配合 viewport meta 标签生效，还可封装 .vw(@value) mixin 统一处理。
为什么直接用 vw 在 Less 里会报错
Less 编译器默认把 vw 当作未定义变量（比如你写 width: 100vw;，它会尝试查找变量 @vw），而不是 CSS 单位，所以会抛出 Variable @vw is undefined 错误。这不是浏览器问题，是 Less 解析阶段就卡住了。
解决思路很直接：让 Less 知道这串字符不该被解析成变量。
- 用引号包裹单位值，如
"100vw"，但注意这会让最终 CSS 也带引号，非法 - 用转义写法
~"100vw"，这是 Less 的「不编译字符串」语法，输出为纯文本100vw - 避免写成
100 vw（空格分隔）——Less 仍会尝试解析vw
vw 适配必须配合 viewport meta 才生效
很多开发者写了 width: ~"100vw"; 却发现页面没按预期缩放，根本原因是没在 HTML 中声明视口宽度。移动端的 vw 是基于 layout viewport 计算的，而默认情况下这个 viewport 可能是 980px 或更大。
必须确保页面有这行 meta：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
否则即使 Less 编译正确，1vw 也不等于屏幕宽度的 1%，而是等于那个“假 viewport”的 1%。
如何封装一个安全的 vw 转换函数
手动写 ~"37.5vw" 很容易出错（比如忘了波浪号、单位写成 VW、数值算错）。推荐在 Less 中定义一个 mixin 或函数来统一处理。
例如，在全局变量文件中添加：
.vw(@value) {
width: ~"@{value}vw";
max-width: ~"@{value}vw";
}
然后这样调用：
.header {
.vw(100);
}
.box {
.vw(75);
}
注意点：
- 不能直接返回值（Less 不支持 return），所以用 mixin 更稳妥
- 不要试图用
unit()或percentage()处理vw，它们只适用于数字单位转换，对字符串无效 - 如果需要同时支持
px回退（老 Android），得额外加媒体查询或 JS 注入，Less 本身做不到条件单位降级
和 rem 方案比，vw 在 Less 里更轻量但限制更多
vw 适配不需要 JS 动态改根字体大小，Less 编译后就是静态值，构建快、无运行时开销。但它也有硬伤：
- 无法像
rem那样通过 JS 精确控制缩放边界（比如最小字号限制），vw是纯线性映射 - Android 4.4 以下 WebView 对
vw支持极差，且无法通过 Less 检测并 fallback - 文字使用
vw容易导致小屏上过小、大屏上过大，通常要搭配clamp()（但 IE/旧安卓不支持）
如果你项目需兼容到 Android 4.x 或要求强可控性，vw + Less 这条路看起来简单，实际落地时往往得补一堆 hack。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
