CSS：能否用更简洁的方式编写多个媒体查询？

你的代码确实有不少可以精简优化的空间，下面从基础到进阶给出几种可行方案：

1. 先清理冗余断点 #

原代码里min-width:1300px和min-width:1420px的规则完全一致，而min-width:1300px已经会对1420px及以上的屏幕生效，后者完全是多余的，先做最基础的精简：

selector { padding-left: 19% }

@media only screen and (min-width: 1300px) {
  selector { padding-left: 17% }
}

@media only screen and (min-width: 1480px) {
  selector { padding-left: 16.5% }
}

@media only screen and (min-width: 1520px) {
  selector { padding-left: 16% }
}

@media only screen and (min-width: 1585px) {
  selector { padding-left: 15.5% }
}

@media only screen and (min-width: 1620px) {
  selector { padding-left: 15% }
}

@media only screen and (min-width: 1720px) {
  selector { padding-left: 14% }
}

@media only screen and (min-width: 1820px) {
  selector { padding-left: 13% }
}

@media only screen and (min-width: 1920px) {
  selector { padding-left: 12% }
}

2. 用CSS变量提升可维护性 #

把所有padding值定义成CSS变量，后续修改数值时只需要调整变量，不用反复修改媒体查询里的代码，更易维护：

:root {
  --padding-xs: 19%;
  --padding-sm: 17%;
  --padding-md: 16.5%;
  --padding-lg: 16%;
  --padding-xl: 15.5%;
  --padding-2xl: 15%;
  --padding-3xl: 14%;
  --padding-4xl: 13%;
  --padding-5xl: 12%;
}

selector {
  padding-left: var(--padding-xs);
}

@media only screen and (min-width: 1300px) {
  selector { padding-left: var(--padding-sm) }
}
@media only screen and (min-width: 1480px) {
  selector { padding-left: var(--padding-md) }
}
@media only screen and (min-width: 1520px) {
  selector { padding-left: var(--padding-lg) }
}
/* 后续断点同理，规则清晰且修改方便 */

3. 用预处理器（Sass/LESS）批量生成代码 #

如果项目用了预处理器，可以通过循环批量生成所有媒体查询，彻底避免重复代码。比如Sass的实现：

$padding-breakpoints: (
  0: 19%,
  1300: 17%,
  1480: 16.5%,
  1520: 16%,
  1585: 15.5%,
  1620: 15%,
  1720: 14%,
  1820: 13%,
  1920: 12%
);

selector {
  @each $width, $padding in $padding-breakpoints {
    @if $width == 0 {
      padding-left: $padding;
    } @else {
      @media only screen and (min-width: #{$width}px) {
        padding-left: $padding;
      }
    }
  }
}

编译后会生成和你原代码一致的CSS，但维护时只需要修改$padding-breakpoints这个映射表即可，效率极高。

4. 用clamp()实现连续动态适配（近似效果） #

如果不需要严格匹配每个断点的固定值，可以用clamp()结合calc()实现连续的动态变化，比如让padding-left随屏幕宽度从1300px到1920px，从17%线性降到12%：

selector {
  padding-left: clamp(12%, 19% - ((100vw - 1300px) * 0.01129%), 19%);
}

这种方式代码极其简洁，但效果是连续过渡，和原代码的阶梯式变化略有差异，适合对精度要求不是特别高的场景。

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