vw()函数易出错因三大隐性假设被打破：设计稿宽固定为375px、所有设备支持vw、所有属性适用vw；实际需校验输入单位、抽离基准宽度变量、禁用border等描边类属性、配合clamp()和媒体查询降级。
为什么直接写 vw() 函数容易出错
很多人照着网上示例写：@function vw($px) { @return $px / 375 * 100vw; }，编译能过，但上线后字体发虚、按钮错位、小屏设备元素溢出——问题不在语法，而在三个隐性假设被打破了：设计稿宽度固定为 375px、所有设备都支持 vw、所有属性都适合用 vw。实际项目中，设计稿可能是 750px，PC 大屏要 fallback 到 px，border 或 box-shadow 用 vw 会随屏幕缩放失真。
vw() 函数必须带单位检查和基准参数
SCSS 编译期不校验单位类型，传入 16em 或 20% 会导致静默计算错误或中断编译。函数必须主动拦截非 px 值，并把基准宽度抽成变量而非硬编码。
- 用
@if unit($px) != 'px'检查输入单位，否则抛错：@error 'vw() expects a value in px, got #{unit($px)}' - 基准宽度定义为变量，如
$vw-base: 750;（匹配 750px 设计稿），避免散落在多处 - 返回值必须是带单位的数值：
@return math.div($px, $vw-base) * 100vw;（注意用sass:math替代旧版除法，避免 Sass 4.0+ 报 warning）
哪些 CSS 属性不该用 vw() 转换
vw 是视口相对单位，对字体、宽高、内边距这类“内容尺寸”有效，但对“描边类”属性天然不友好。例如 border: 1px solid #ccc 转成 0.133vw 后，在 iPhone SE 上约 0.5px，渲染为模糊线；在 iPad Pro 上可能变成 2px，视觉变重。
- 明确排除
border、outline、box-shadow、text-shadow等属性，不要在函数里自动处理 - 字体大小慎用：小字号（如
12px）转vw后在大屏上可能超 32px，破坏可读性，建议加最小值限制（靠媒体查询或 CSS clamp） - 动画中的
transform: translateX(10px)不该转 —— 这类偏移量需保持物理像素一致性，否则手势拖拽会抖动
真正跨端时，vw() 必须配合 fallback 和条件编译
IE11 不支持 vw，部分安卓 WebView 对 vmin/vmax 解析异常，纯 vw 输出等于放弃兼容性。不能只写一个函数，得配套生成降级规则。
- 用
@media screen and (min-width: 1200px)给 PC 端回退到px或rem值 - 对关键样式（如按钮高度、行高），用
clamp()包裹：font-size: clamp(14px, 4.2vw, 18px); - 若项目已用
postcss-px-to-viewport，就别再手写vw()函数——两者混用会导致重复转换，比如width: vw(750)编译为100vw，再被 PostCSS 二次转成100vw→10000vw
实际项目里最常被忽略的，是把「单位转换」和「适配逻辑」混为一谈。vw() 只解决“怎么算”，而“要不要算”“在哪算”“算完怎么兜底”，得靠工程配置和样式规范来约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
