Question

我需要将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运算符结合方向，因为我对使用此运算符不是很熟悉，我想学习如何正确使用它并对不同的设备进行一些测试

Answer 1

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

由于您想要应用于不是iPad的每个屏幕媒体，您可以限制为最小设备宽度。我忽略了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) {
}

希望我能帮助你。

如何将逻辑运算符NOT与方向媒体功能组合在一起

1 个答案: