如何在不修改断点的情况下为多组媒体查询复用CSS样式？

你可以通过以下几种方式实现样式复用，且无需修改两组媒体查询的宽度参数：

1. 合并媒体查询规则 #

直接将两个媒体查询用逗号分隔，把共用样式写在同一个规则块内，这样样式会同时作用于两个屏幕范围：

@media (min-width:769px) and (max-width:899px), 
       (min-width:401px) and (max-width:768px) {
  /* 这里放置你原来的元素宽度调整样式 */
  .your-target-element {
    width: 85%;
    margin: 0 auto;
    /* 其他相关样式 */
  }
}

这种方式最简洁，无需冗余代码，直接扩展媒体查询的作用范围。

2. 用CSS变量复用样式 #

如果需要分开维护两个媒体查询，可将共用样式定义为CSS变量，再在两个媒体查询中引用：

/* 全局定义共用样式变量 */
:root {
  --element-adjusted-width: 85%;
  --element-margin: 0 auto;
}

/* 原有媒体查询 */
@media (min-width:769px) and (max-width:899px) {
  .your-target-element {
    width: var(--element-adjusted-width);
    margin: var(--element-margin);
    /* 其他专属样式（如果有的话） */
  }
}

/* 新增媒体查询 */
@media (min-width:401px) and (max-width:768px) {
  .your-target-element {
    width: var(--element-adjusted-width);
    margin: var(--element-margin);
    /* 其他专属样式（如果有的话） */
  }
}

这种方式适合后续需要单独调整某一媒体查询样式的场景，变量修改后两处会同步更新。

3. 预处理器混合宏（如Sass/LESS） #

如果项目使用CSS预处理器，可以将共用样式封装为混合宏，在两个媒体查询中引入：

Sass 示例： #

/* 定义混合宏 */
@mixin element-width-adjustments {
  .your-target-element {
    width: 85%;
    margin: 0 auto;
    /* 其他共用样式 */
  }
}

/* 原有媒体查询 */
@media (min-width:769px) and (max-width:899px) {
  @include element-width-adjustments;
}

/* 新增媒体查询 */
@media (min-width:401px) and (max-width:768px) {
  @include element-width-adjustments;
}

这种方式在大型项目中能有效减少代码冗余，提升可维护性。

内容的提问来源于stack exchange，提问作者19cs106 M. Gokul Sanjay