如何在SCSS中组合多个@custom-media自定义媒体查询？

你不能用and组合(--mobile)和(--desktop)来实现目标效果，这样写的话样式永远不会生效。

原因很简单：你的--mobile对应width < 535px，--desktop对应width >= 1025px，这两个宽度区间完全没有重叠，and逻辑要求两个条件同时满足，没有设备能同时处于这两个宽度范围，所以这个媒体查询永远不会触发。

如果要让样式在移动端或桌面端生效，正确的做法是用**逗号（,）**分隔两个自定义媒体查询——逗号在媒体查询里代表「或（OR）」的逻辑，只要满足其中一个条件就会应用样式。示例代码如下：

@media (--mobile), (--desktop) {
    // 仅在移动端和桌面端生效的样式
}

自定义媒体查询本质就是预定义的媒体条件片段，组合时完全遵循普通媒体查询的逻辑规则：and是「且」，要求所有条件同时成立；逗号是「或」，任一条件成立即可触发。

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