结合 CSS 媒体查询答案

【问题标题】：Combining CSS media queries结合 CSS 媒体查询
【发布时间】：2012-02-18 03:53:14
【问题描述】：

我想向打印页面 (media=print) 的人和在手机上浏览的人显示相同的 CSS 样式集。有没有办法可以组合 CSS 媒体查询？

有点像

@media only print or @media only screen and (max-device-width: 480px) {
  #container {
    width: 480px;
  }
}

【问题讨论】：

【解决方案1】：

用逗号分隔：

@media only print, only screen and (max-device-width: 480px)

See the spec，特别是示例 VI（已添加重点）：

多个媒体查询可以组合在一个媒体查询列表中。一种以逗号分隔的媒体查询列表。如果一种或多种媒体逗号分隔列表中的查询为真，整个列表为真，否则为假。在媒体查询语法中，逗号表示逻辑或，而“and”关键字表示逻辑与。

我怀疑第二个only 是必需的，所以你可以这样做：

@media only print, screen and (max-device-width: 480px)

【讨论】：

“only”运算符用于仅在整个查询匹配时应用样式，这对于防止旧版浏览器应用所选样式很有用。所以只需使用逗号...例如：如果您想在设备处于横向模式时应用样式：@media (min-width: 700px) and (orientation: Landscape) { ... }

【解决方案2】：

来自https://developer.mozilla.org/en/CSS/Media_queries

您可以将多个媒体查询组合在一个逗号分隔的列表中；如果列表中的任何媒体查询为真，关联样式应用表。这相当于逻辑“或”运算。

您只需删除第二个@media 并添加一些括号。

【讨论】：