结合CSS媒体查询

我想为打印页面（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) 

看规范 ，特别是例六（重点加）：

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

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

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

Answer 2

从https://developer.mozilla.org/en/CSS/Media_queries

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

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