针对 2 个不同范围的 CSS 媒体查询

Question

我遇到过这样一种情况，在大屏幕（1400 像素以上）上，我们有一个带有宽边内容（3 列）的大内容区域。随着屏幕变小，旁列的数量越来越少，但主要内容也越来越小。因为主要内容变小了，所以我有媒体查询来设置此内容的样式，并且在主要内容中的内容彼此下方。

这里的问题是，当浏览器分辨率低于 960 像素时，容器都占用 1 行的宽度，因此主容器再次变大，我希望相同的规则适用于 1400 像素以上的分辨率（因为它看起来更好）。然后在 768px 以下，我想回到所有内容都在 1 行的布局。

我已经将这些样式分开了：@media only screen and (min-width: 960px) and (max-width: 1400px){ 但现在我也希望在 768px 以下使用这些相同的样式。这是否可以在不复制我的代码的情况下实现？

Answer 1

Demo

Or

逗号分隔。

@media 
  only screen and (min-width: 960px) and (max-width: 1400px),
  (max-width: 768px) {...
}

从技术上讲，这些被视为单独的媒体查询，但实际上是or。