结合 CSS 媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8994664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Combining CSS media queries
提问by Kevin Burke
I want to display the same set of CSS styles to people printing the page (media=print) and people browsing on a mobile phone. Is there a way I can combine CSS media queries?
我想向打印页面的人（media=print）和在手机上浏览的人显示相同的 CSS 样式集。有没有办法组合 CSS 媒体查询？
Something like
就像是
@media only print or @media only screen and (max-device-width: 480px) {
#container {
width: 480px;
}
}
回答by James Allardice
Separate them with a comma:
用逗号分隔它们：
@media only print, only screen and (max-device-width: 480px)
See the spec, in particular, example VI (emphasis added):
参见 spec，特别是示例 VI（强调）：
Several media queries can be combined in a media query list. A comma-separated list of media queries. If one or more of the media queries in the comma-separated list are true, the whole list is true, and otherwise false. In the media queries syntax, the comma expresses a logical OR, while the ‘and' keyword expresses a logical AND.
多个媒体查询可以组合在一个媒体查询列表中。以逗号分隔的媒体查询列表。如果逗号分隔列表中的一个或多个媒体查询为真，则整个列表为真，否则为假。在媒体查询语法中，逗号表示逻辑 OR，而“and”关键字表示逻辑 AND。
I doubt that the second onlyis needed, so you can probably do:
我怀疑only是否需要第二个，所以你可以这样做：
@media only print, screen and (max-device-width: 480px)
回答by entropid
From https://developer.mozilla.org/en/CSS/Media_queries
来自https://developer.mozilla.org/en/CSS/Media_queries
You can combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the associated style sheet is applied. This is the equivalent of a logical "or" operation.
您可以在逗号分隔列表中组合多个媒体查询；如果列表中的任何媒体查询为真，则应用关联的样式表。这相当于逻辑“或”操作。
You just have to remove the second @mediaand add some brackets.
您只需要删除第二个@media并添加一些括号。
