css - 使用或在媒体查询中？

Question

<link rel="stylesheet" type="text/css" href="css/mobile.css" media="screen and (max-height: 500px)" />
<link rel="stylesheet" type="text/css" href="css/mobile.css" media="screen and (orientation:portrait)" />

我有上述媒体查询来定位纵向和窗口高度 < 500 的用户，有没有办法在媒体查询中使用 OR 将它们合并到一个链接标签中？

Answer 1

使用 , 作为 OR 运算符。

参考：CSS 媒体查询

因此，您的代码将是：

<link rel="stylesheet" type="text/css" href="css/mobile.css" media="screen and (max-height: 500px), screen and (orientation:portrait)" />

Answer 2

这是MDN 文章中有关媒体查询的相关部分。

只需用逗号将它们组合起来：

media="screen and (max-height: 500px), screen and (orientation: portrait)"