Question

我一直试图扩展几个媒体查询。

我有一个基于最大宽度的查询和一个基于最小宽度的查询，如下所示：

@media only screen and (max-width: 600px) {
/* styling goes here */
}

@media only screen and (min-width: 600px) {
/* styling goes here */
}

我想扩展第一个查询，使其在任何识别自身处于纵向方向的设备上启用，同样扩展第二个查询以在设备未处于纵向模式时触发。

第二个媒体查询（基于最小宽度）在纵向模式下永远不应用，无论设备宽度如何。

Answer 1

您只需在媒体查询中添加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 */
}

的 EDITED 的根据您的JS Bin示例，虽然我仍然不能100％确定您的问题是什么，但您可以通过从第二个查询中删除（方向：格局）来消除所获得的“白色间隙”。我怀疑第一个没有在你的ipad中触发，因为最大宽度是错误的，我认为对于ipad应该是768px（参见The Responsinator指南）。

Answer 2

我认为你不是在寻找AND运算符，而是OR运算符，它在CSS世界中只是一个逗号。因此，您可以执行以下操作：

@media only screen and (max-width: 600px),
screen and (orientation:portrait) {
     /* styling goes here */
}

但是，为了达到您希望的结果，您必须反转查询的顺序，以便正确级联。这是因为，例如，在iPad中，即使在 portrait 方向，您也将拥有min-width: 600px，将两个语句中的一个评估为true，从而触发媒体查询。 / p>

通过将portrait媒体查询放在landscape下面，您实际上会确保当orientation查询评估为TRUE时，您将覆盖之前的样式

您可以在此处看到JSBin的修改后的工作版本：

Working example

使用iPad试试这个。虽然在纵向模式下大于600像素，但仍会显示：小屏幕。

坚持媒体查询

2 个答案: