结合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)

请参阅规范,特别是示例VI(重点添加):

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

我怀疑第二个only是否需要,所以你可能会这样做:

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