css - 结合 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(添加了重点):

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.

我怀疑是否需要第二个 only，因此您可以这样做:

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