如何自动生成CSS属性上下限间的N个中间插值？含媒体查询与非线性场景

以下是针对需求的几种可行实现方案，同时覆盖线性与非线性计算场景：

1. Sass 预编译方案（推荐用于静态样式生成） #

Sass 的循环和变量计算能力可以轻松自动生成指定数量的媒体查询规则，适合预编译静态 CSS 文件。

线性过渡示例 #

// 配置核心参数
$start-breakpoint: 1080px;
$end-breakpoint: 2160px;
$start-top: 50%;
$end-top: 32%;
$middle-steps: 4; // 中间过渡步骤数，最终总规则数 = 中间步骤数 + 2

// 计算步长
$breakpoint-step: ($end-breakpoint - $start-breakpoint) / ($middle-steps + 1);
$top-step: ($end-top - $start-top) / ($middle-steps + 1);

// 生成起始断点规则
@media (min-height: #{$start-breakpoint}) {
  top: #{$start-top};
}

// 循环生成中间过渡规则
@for $i from 1 through $middle-steps {
  $current-breakpoint: $start-breakpoint + $breakpoint-step * $i;
  $current-top: $start-top + $top-step * $i;
  @media (min-height: #{$current-breakpoint}) {
    top: $current-top;
  }
}

// 生成结束断点规则
@media (min-height: #{$end-breakpoint}) {
  top: #{$end-top};
}

非线性过渡示例 #

只需修改属性值的计算逻辑，即可实现二次曲线、指数曲线等非线性过渡：

// 替换中间规则中的 $current-top 计算为二次曲线
$progress: $i / ($middle-steps + 1);
$current-top: $start-top + ($end-top - $start-top) * pow($progress, 2);

2. 纯 CSS 方案（连续过渡替代离散媒体查询） #

纯 CSS 无法自动生成离散的媒体查询规则（无循环语法），但可以通过 clamp() + calc() 实现连续线性过渡，无需手动编写多个媒体查询：

:root {
  --min-viewport-height: 1080px;
  --max-viewport-height: 2160px;
  --min-top-value: 50%;
  --max-top-value: 32%;
}

.target-element {
  top: clamp(
    var(--max-top-value),
    calc(var(--min-top-value) - ((var(--min-top-value) - var(--max-top-value)) * (100vh - var(--min-viewport-height)) / (var(--max-viewport-height) - var(--min-viewport-height)))),
    var(--min-top-value)
  );
}

非线性连续过渡 #

利用 CSS 原生的 pow() 函数（需注意浏览器兼容性，目前现代浏览器已支持）实现非线性过渡：

.target-element {
  top: clamp(
    var(--max-top-value),
    calc(var(--min-top-value) - ((var(--min-top-value) - var(--max-top-value)) * pow((100vh - var(--min-viewport-height)) / (var(--max-viewport-height) - var(--min-viewport-height)), 2))),
    var(--min-top-value)
  );
}

3. JavaScript 动态生成方案 #

适合需要根据动态参数（如用户设备、运行时配置）生成规则的场景，通过 JS 计算后动态插入样式：

线性过渡示例 #

// 配置参数
const styleConfig = {
  selector: '.target-element',
  property: 'top',
  startBreakpoint: 1080,
  endBreakpoint: 2160,
  startValue: 50,
  endValue: 32,
  middleSteps: 4
};

// 计算步长
const breakpointStep = (styleConfig.endBreakpoint - styleConfig.startBreakpoint) / (styleConfig.middleSteps + 1);
const valueStep = (styleConfig.endValue - styleConfig.startValue) / (styleConfig.middleSteps + 1);

// 构建 CSS 内容
let cssContent = '';
// 起始规则
cssContent += `@media (min-height: ${styleConfig.startBreakpoint}px) { ${styleConfig.selector} { ${styleConfig.property}: ${styleConfig.startValue}%; } }\n`;
// 中间规则
for (let i = 1; i <= styleConfig.middleSteps; i++) {
  const currentBreakpoint = styleConfig.startBreakpoint + breakpointStep * i;
  const currentValue = styleConfig.startValue + valueStep * i;
  cssContent += `@media (min-height: ${currentBreakpoint}px) { ${styleConfig.selector} { ${styleConfig.property}: ${currentValue}%; } }\n`;
}
// 结束规则
cssContent += `@media (min-height: ${styleConfig.endBreakpoint}px) { ${styleConfig.selector} { ${styleConfig.property}: ${styleConfig.endValue}%; } }\n`;

// 插入到页面
const styleElement = document.createElement('style');
styleElement.textContent = cssContent;
document.head.appendChild(styleElement);

非线性过渡修改 #

只需调整 currentValue 的计算逻辑，例如实现指数曲线过渡：

const progress = i / (styleConfig.middleSteps + 1);
const currentValue = styleConfig.startValue + (styleConfig.endValue - styleConfig.startValue) * Math.pow(progress, 3);

关于非线性值计算的支持 #

上述三种方案均支持非线性计算：

• Sass：通过内置的 pow()、log() 等数学函数，或自定义公式实现。
• 纯 CSS：依赖原生 pow() 等数学函数（需确认目标浏览器兼容性）。
• JavaScript：利用 Math 对象提供的所有数学方法，可实现任意复杂的非线性逻辑。

内容的提问来源于stack exchange，提问作者maja