如何根据窗口宽度切换SCSS中vw与px单位的渲染？

算力阿峰

2026-8-16

视口宽度大于1921px时自动将vw转为px的SCSS实现方案

可以通过自定义SCSS混合宏（mixin）实现需求，自动为目标属性生成两种状态样式：视口≤1921px时保留vw单位，视口>1921px时切换为原始px值。

步骤1：保留工具函数并添加混合宏

保留你已有的stripUnit和vw函数，新增一个responsive-vw混合宏来处理响应式单位切换：

@function stripUnit($value) {
    @return $value / ($value * 0 + 1);
}
@function vw($pxValue) {
    @return #{stripUnit($pxValue) / stripUnit($html-font-size)}vw;
}

// 自动生成响应式单位切换逻辑
@mixin responsive-vw($prop, $pxValue) {
  #{$prop}: vw($pxValue);
  // 视口宽度超过1921px时，覆盖为原始px值
  @media (min-width: 1922px) {
    #{$prop}: $pxValue;
  }
}

步骤2：在样式中使用混合宏

替换原先直接调用vw()的写法，改用@include responsive-vw()：

.down-arrow {
  position: absolute;
  @include responsive-vw(right, 42px);
  @include responsive-vw(bottom, 220px);
  @include responsive-vw(width, 100px);
  @include responsive-vw(height, 100px);
  border-radius: 100%;
  background-color: $white;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px 0 rgba(211, 211, 211, 0.5);
}