如何设置永远无法满足的媒体查询条件?

时间:2016-03-17 15:28:56

标签: css css3 media-queries

如何在任何设备上创建永远不会被选择的媒体查询断点?

我见过人们使用像only speechonly screen and (min-width: 1000em)之类的东西,但这些看起来像是等待发生的尴尬案件。对于阅读代码的任何其他开发人员,我也喜欢更干净,更直观的东西。

是否可以创建不可能的媒体查询?

如果有人想知道“你为什么要这样做?”,在我的情况下,这是因为我试图关闭第三方模块中的一个条件,这个模块是硬编码的,可以做某些不受欢迎的事情。断点如果满足某个媒体查询。基本上,它有一个不必要的宽屏幕视图,不必要地删除有用的功能。

这个第三方模块不会让我关闭这个条件或修改不良行为,而不会破坏核心模块代码,这会破坏未来的更新,但它确实允许我覆盖其默认的媒体查询串。所以,我正在寻找最简洁的不可能的媒体查询与不良行为相关联,以便它永远不会发生。

3 个答案:

答案 0 :(得分:3)

not all

......逻辑上意味着“不是任何设备”。它似乎是一个全能的消极因素。

not all通常用于not all and (some other condition)dev.mozilla gives some examples)之类的构造中,意思是“如果其他条件在任何设备上都不是真的那么”,那么这是完全有效的配对。 / p>

答案 1 :(得分:2)

除了OP的回答之外,媒体查询规范中还解释了not关键字。

  

2. Media Queries

     

逻辑NOT可以通过not关键字表示。该   在媒体查询开头存在关键字not   否定结果。

     

3.1. Error Handling

     

用户代理将其中一个媒体查询表示为not all   指定的媒体功能未知。

使用此关键字可以轻松"根据问题中的要求设置永远无法满足的媒体查询条件

以下是它的工作原理:

@media not screen and ( min-width: 1000px ) { body { background-color: green; } }

这意味着在屏幕尺寸大于1000px的情况下,请勿执行此代码。换句话说,当屏幕尺寸小于1000px时,将执行媒体查询。它相当于:

@media screen and ( max-width: 1000px ) { body { background-color: green; } }

答案 2 :(得分:2)

无法满足低宽和高宽的匹配,所以我想到了:

@media screen and (max-width: 123px) and (min-width: 4321px) {
  /* Never ever */
}