scss中%是单位而非运算符，无法直接参与计算；正确做法是用percentage($h / $w)或#{round($h / $w * 10000) / 100}%输出带%的数值，确保父容器有明确宽度且避免与calc()混用。
SCSS里用%做比例计算根本不管用
直接在SCSS中写 width: 50%; 是合法的，但它只是原样输出CSS百分比，不是“运算”——你没法用它动态算出某个容器内子项该占多少百分比。真正需要的是：给定父容器宽度、子项固定宽高比（比如16:9），自动算出padding-top或width值。这时候必须用SCSS的数学运算，而%是单位，不是运算符。
常见错误是写 $ratio: 9 / 16 %;，这会报错或输出无效CSS，因为%不能参与除法运算。正确做法是先算小数，再乘100加%单位。
-
9 / 16→ 得0.5625，再手动转成56.25% - 或者用
percentage(9 / 16)函数（SCSS内置） - 但注意：
percentage()只接受小数，不接受带单位的值，比如percentage(9px / 16px)会报错
用percentage()安全算流式比例
这是最稳妥的方式，尤其适合算padding-top实现响应式占位（即“padding hack”）。例如，要让一个容器保持16:9比例，需设置padding-top: 56.25%;（因为9÷16=0.5625）。
@function aspect-ratio($w, $h) {
@return percentage($h / $w);
}
<p>.container {
position: relative;
width: 100%;
padding-top: aspect-ratio(16, 9); // 输出 56.25%
}</p>
这个函数能复用，但要注意两点：
- 参数顺序是
aspect-ratio($width, $height)，和CSS中aspect-ratio属性相反，别搞反 - 如果传入带单位的值（如
16px），除法结果会带单位，percentage()不接受，会编译失败 - SCSS 4.0+ 支持，老版本需手动乘100并拼接
%
为什么不用calc()配合SCSS变量？
有人想用 calc(#{$ratio} * 100%)，但这是错的：calc() 是运行时CSS计算，SCSS变量在编译时就没了。你写 $ratio: 0.5625;，然后 calc(#{$ratio} * 100%)，编译后是 calc(0.5625 * 100%)，浏览器不认这种写法。
正确思路是：所有比例运算必须在SCSS层完成，输出纯数字+%，而不是把计算逻辑丢给calc()。
- ✅ 正确：
padding-top: #{percentage(9/16)};→ 编译为padding-top: 56.25%; - ❌ 错误：
padding-top: calc(#{$ratio} * 100%);→ 浏览器解析失败 - ⚠️ 注意：如果比例依赖屏幕尺寸（如
vw），那就真得用calc()，但这就脱离了SCSS运算范畴
移动端适配时比例值容易被忽略的细节
流式比例布局常用于视频容器、卡片、封面图等，但很多人只在桌面端测试，忽略了视口缩放或iOS Safari的渲染差异。比如，某些旧版iOS对padding-top百分比的参照基准有偏差（以父容器width为准，但若父容器width由flex决定且未显式设宽，可能为0）。
- 确保父容器有明确
width（哪怕width: 100%），否则padding-top: 56.25%无效 - 不要在
display: grid直接子元素上用此技巧，grid item的padding百分比行为不稳定 - 如果用了
transform: scale()之类，会影响内部子元素的相对定位，比例容器内容可能错位
比例计算本身很简单，难的是它嵌在真实布局链路里——一环没扣紧，整个流式就塌了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
