0

我需要将 css 属性定位到任何不是 iPad 并且基于设备方向的设备。

嵌套媒体查询在我的模拟器上不起作用。例子

@media not screen and (device-width: 768px) and (device-height: 1024px) {

    @media screen and (orientation: portrait) {
        DIV { border: solid 1px yellow; }
    }

    @media screen and (orientation: landscape) {
        DIV { border: solid 1px red; }
    }
}

前一个总是在两个方向上都给出黄色边框。老实说，我从未使用过它们，因为我读到它们可能无法在许多设备上按预期工作。

我找不到将其拆分为单独的组合查询的方法，例如

@media screen and (orientation: portrait) and not screen and (device-width: 768px) and (device-height: 1024px) {
    DIV { border: solid 1px yellow; }
}

@media screen and (orientation: landscape) and not screen and (device-width: 768px) and (device-height: 1024px) {
    DIV { border: solid 1px red; }
}

这从不匹配。

我知道逗号分隔的查询是逻辑 OR，但我也尝试过

@media screen and (orientation: portrait), not screen and (device-width: 768px) and (device-height: 1024px) {
    DIV { border: solid 1px yellow; }
}

@media screen and (orientation: landscape), not screen and (device-width: 768px) and (device-height: 1024px) {
    DIV { border: solid 1px red; }
}

这显然会产生总是红色的边框。

我知道我可以覆盖 css 属性，但我的问题是如何正确使用逻辑 NOT 运算符与方向相结合，因为我对使用此运算符不是很熟悉，我想学习如何正确使用它并对不同的设备进行一些测试.

4

1 回答 1

0

根据我在识别 iPad、iPhone 等以将特定布局调整应用于网站的经验，我很高兴地说这些提示对我有用。http://zsprawl.com/iOS/2012/03/css-for-iphone-ipad-and-retina-displays/

由于您想应用到可能不是 iPad 的每个屏幕媒体，您可以限制为 min-device-width。我在这里忽略了 Retina，因为我找不到他们将报告的设备宽度。所以在你的情况下，我会从我链接到的代码中修改 iPad 部分，如下所示：

/* NOT iPad and Portrait */
@media screen and (min-device-width: 769px) and (orientation:portrait) {
}

/* NOT iPad and Landscape */
@media screen and (min-device-width: 769px) and (orientation:landscape) {
}

希望我能帮助你。

于 2014-01-07T11:50:48.737 回答