组合CSS媒体查询 [英] Combining CSS media queries

问题描述

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

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 only print or @media only screen and (max-device-width: 480px) {

     #container {
         width: 480px;
     }
} 

推荐答案

他们用逗号：

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

查看规范，特别是示例VI（添加了强调）：

See the spec, in particular, example VI (emphasis added):

一些媒体查询可以在媒体查询列表。 A
以逗号分隔的媒体查询列表。如果逗号分隔列表中的一个或多个媒体
查询为真，则整个列表为真，
，否则为假。在媒体查询语法中，逗号表示
a logical OR ，而'和'关键字表示逻辑AND。

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.

我怀疑第二个只需要，因此你可以这样做：

I doubt that the second only is needed, so you can probably do:

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

这篇关于组合CSS媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！