CSS Media查询2个不同的范围

Question

我有一种情况，在大屏幕（1400px +）上，我们有一个大内容区域，宽边内容（3列）。随着屏幕变小，旁边列的数量变少，但主要内容也变小。由于主要内容变小，我有媒体查询来设置这些内容的样式，并且内容在主要内容中相互低于。

这里的问题是，当浏览器分辨率低于960px时，容器全部占用1行的宽度，因此主容器再次变大，我想要相同的规则应用于1400px +分辨率（因为它看起来更好）。然后低于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。