我一直在尝试扩展几个媒体查询。
我有一个基于最大宽度的查询和一个基于最小宽度的查询，如下所示：
@media only screen and (max-width: 600px) {
/* styling goes here */
}
@media only screen and (min-width: 600px) {
/* styling goes here */
}
我想扩展第一个查询以使其在识别为纵向的任何设备上也启用它，并同样扩展第二个查询以在具有非纵向模式的设备时触发。
无论设备宽度如何，第二个媒体查询（基于最小宽度）都不应在纵向模式下应用。
【问题讨论】：
标签： css media-queries
我认为您不是在寻找 AND 运算符，而是在寻找 OR 运算符，它在 CSS 世界中只是一个逗号。因此，您可以执行以下操作：
@media only screen and (max-width: 600px),
screen and (orientation:portrait) {
/* styling goes here */
}
但是，为了获得您希望的结果，您必须颠倒查询的顺序，以便它们可以正确地级联。这是因为，例如，在 iPad 中，即使在 纵向 方向，您也会有一个 min-width: 600px，将两个语句之一评估为 true，从而触发媒体查询。
通过将portrait 媒体查询放在landscape 下方，您实际上可以确保当orientation 查询计算结果为TRUE 时，您将覆盖之前的样式。
您可以在此处查看 JSBin 的修改工作版本：
在 iPad 上试试这个。虽然在竖屏模式下大于 600px，但仍会显示：小屏幕。
【讨论】：
您可以将and (orientation:portrait) 或and (orientation:landscape) 添加到您的媒体查询中。
例如：
@media only screen and (max-width: 600px) and (orientation:portrait) {
/* styling goes here */
}
@media only screen and (min-width: 600px) and (orientation:landscape) {
/* styling goes here */
}
已编辑 根据您的 JS Bin 示例，虽然我仍然不能 100% 确定您的问题是什么，但您可以通过从第二个查询中删除 (orientation: Landscape) 来删除“空白间隙”。 我怀疑第一个没有在您的 ipad 中触发，因为 max-width 是错误的，我认为 ipad 应该是 768px（请参阅The Responsinator 获取指南）。
【讨论】：