结合 CSS 媒体查询

Posted 2023-03-06

【中文标题】结合 CSS 媒体查询

【英文标题】：Combining CSS media queries

【发布时间】：2012-02-18 03:53:14

【问题描述】：

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

有点像

@media only print or @media only screen and (max-device-width: 480px) 
  #container 
    width: 480px;
  
 

【问题讨论】：

相关：***.com/questions/7668301/…

【参考方案1】：

用逗号分隔：

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

See the spec，特别是示例 VI（已添加重点）：

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

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

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

【讨论】：

“only”运算符用于仅在整个查询匹配时应用样式，这对于防止旧版浏览器应用所选样式很有用。所以只需使用逗号...例如：如果您想在设备处于横向模式时应用样式：@media (min-width: 700px) and (orientation: Landscape) ...

【参考方案2】：

来自https://developer.mozilla.org/en/CSS/Media_queries

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

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