如何将多设备响应式CSS样式合并到单个类中？

开发者阿泽

2026-8-18

可以将多设备CSS样式合并到单个类中，以下是实现方法

当然可以，你之前的写法无效是因为原生CSS不支持在类选择器内部嵌套媒体查询，但换个写法或者借助预处理器就能实现。

原生CSS实现方案

不用嵌套，而是把媒体查询作为外层容器，在内部定义同一个类的不同断点样式。这样HTML里只需要给元素加一个类，就能自动适配不同屏幕：

/* 基础样式（默认适配大屏） */
.responsive-element {
  padding: 2rem;
  font-size: 1.2rem;
}

/* 平板断点（≤991px） */
@media (max-width: 991px) {
  .responsive-element {
    padding: 1.5rem;
    font-size: 1.1rem;
  }
}

/* 小平板/手机断点（≤767px） */
@media (max-width: 767px) {
  .responsive-element {
    padding: 1rem;
    font-size: 1rem;
  }
}

/* 小屏手机断点（≤479px） */
@media (max-width: 479px) {
  .responsive-element {
    padding: 0.8rem;
    font-size: 0.9rem;
  }
}

HTML里只需写：

<div class="responsive-element">内容</div>

CSS预处理器（Sass/Less）实现嵌套写法

如果你用Sass、Less这类预处理器，就能直接用你尝试的嵌套写法——预处理器会自动把代码编译成原生CSS支持的格式，自然就能生效：

Sass示例：

.responsive-element {
  padding: 2rem;
  font-size: 1.2rem;

  @media (max-width: 991px) {
    padding: 1.5rem;
    font-size: 1.1rem;
  }

  @media (max-width: 767px) {
    padding: 1rem;
    font-size: 1rem;
  }

  @media (max-width: 479px) {
    padding: 0.8rem;
    font-size: 0.9rem;
  }
}

编译后会自动生成和原生CSS方案一致的代码，完美适配你的需求。