结论：用@mixin封装vw/vh转换逻辑加媒体查询兜底是最可控易维护的多端自适应写法；纯vw致小屏文字模糊，无断点即自毁；font-size混入须依最小字号等业务约束条件判断，不可仅静态换算。
直接说结论：用 @mixin 封装 vw/vh 转换逻辑 + 媒体查询兜底，是目前最可控、最易维护的多端自适应混入写法。纯靠 vw 在小屏上文字会糊成一片，不加断点兜底就是自毁式适配。
怎么写一个带断点的 px-to-vw 混入
核心是不能只做“设计稿像素 ÷ 视口基准 × 100vw”这种静态转换——它在手机上会把 14px 字体缩成 0.7vw，实际渲染可能只有 5px。必须结合最小字号/最大宽度等业务约束做条件判断。
-
@mixin font-size($px)内部用@if $px 强制设为 <code>12px，避免过小 - 混入里用
math.div($px, $design-width) * 100vw计算基础值，再用@media (max-width: 768px)覆盖为固定px - 别忘了加
!important的诱惑很强烈，但实际应通过选择器权重或:root变量控制优先级
为什么不能只用 size() 函数而要封装成混入
函数（如 size(300, 200)）只能返回值，没法插入媒体查询、伪类或额外样式声明；而混入能包裹一整套响应逻辑。比如你要让按钮在大屏用 vw 圆角，在小屏切回固定 4px，函数做不到。
- 混入可嵌套调用其他混入，例如
@include font-size(16); @include border-radius(8); - 混入参数支持默认值：
@mixin btn($padding: 12px, $radius: 4px)，比函数更贴近组件开发习惯 - 编译后 CSS 是展开的，没有运行时开销，比 JS 动态计算更稳定
移动端 2x/3x 图适配怎么和混入联动
图像适配本质是「同一语义内容，不同物理分辨率下加载不同资源」，和布局缩放是两件事。强行用 vw 控制 background-size 会导致高清图模糊，必须分离处理。
- 用
@mixin bg-image($url)封装@2x/@3x切换，内部写死@media (-webkit-min-device-pixel-ratio: 2)查询 - 混入里不要写
width: vw(100)这种，而是保持容器尺寸用布局混入，图片自身用background-size: contain或具体像素值 - 注意
device-pixel-ratio在桌面 Chrome 里可能不触发，测试务必覆盖 Windows + 外接高分屏场景
真正难的不是写出能跑的混入，而是定义清楚哪些值该随视口缩放（比如大屏图表容器），哪些必须锁定（比如按钮最小点击区域、表单输入框高度）。混入只是工具，边界感才是关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
