2

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

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

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

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

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

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

4

2 回答 2

2

您可以添加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以获取指南）。

于 2013-04-19T11:15:49.123 回答
1

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

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

However, in order to achieve the result you wish you would have to invert the order of your queries so that they can cascade correctly. This is because, for example, in the iPad, even in portrait orientation you are going to have a min-width: 600px, evaluating one of the two statements to true and hence triggering the media query.

By putting the portrait media query below the landscape one, you will actually make sure that when the orientation query evaluates to TRUE you will be overriding the previous styling.

You can see a modified working version of your JSBin here:

Working example

Try this with the iPad. Though being larger than 600px in portrait mode, it will still display: small-screen.

于 2013-04-19T12:05:48.227 回答