结合CSS媒体查询

Question

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

像

这样的东西

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

Answer 1

用逗号分隔：

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

See the spec，特别是示例VI（强调添加）：

  

可以在媒体查询列表中组合多个媒体查询。一个   以逗号分隔的媒体查询列表。如果是一个或多个媒体   逗号分隔列表中的查询为true，整个列表为true，   否则就是假的。在媒体查询语法中，逗号表示   逻辑OR ，而'and'关键字表示逻辑AND。

我怀疑需要第二个only，所以你可能会这样做：

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

Answer 2

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

  

您可以在逗号分隔列表中组合多个媒体查询;如果   列表中的任何媒体查询都是真的，相关的样式   表格已应用。这相当于逻辑“或”操作。

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