如何合并两个样式相同的@media媒体查询代码？

你可以直接用逗号分隔两个媒体查询条件，合并后的代码如下：

@media only screen and (max-width: 576px), only screen and (min-width: 750px) and (max-width: 900px) {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.1rem;
}

核心逻辑讲解 #

• CSS 规范中媒体查询支持用逗号分隔多个独立的查询规则，只要任意一个规则匹配成功，就会应用大括号内的所有样式，逻辑上等价于「或（OR）」运算。
• 你原本的两段代码样式完全一致，只是生效的屏幕范围不同：
  • 第一段适配屏幕宽度 ≤ 576px 的场景
  • 第二段适配屏幕宽度在 750px ~ 900px 之间的场景
• 合并后既保持了原有的样式生效逻辑，又消除了重复的样式代码，后续要调整这部分样式时只需要修改一次，维护成本更低。

提示：只有多个媒体查询对应的样式完全相同时才适合用该方法合并，如果不同范围下样式有差异，还是需要保留独立的媒体查询块。

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