not（max-width：512px）不工作 [英] not (max-width: 512px) not working

问题描述

我有以下HTML网页：

 < style& 
 @media not（max-width：512px）{* {color：red; }} 
< / style> 
 
 Foobar 
  

但是，这对窗口的 width 。介质规则从不应用。如果我删除而不是，它按预期工作。我不明白不是（max-width）？

是的，我知道还有其他方法完成相同的事情， not（max-width：512px）与 min-width：513px 等等。但是，对于我正在构建的系统，我需要能够指定 not（max-width）。

解决方案

您必须使用以下媒体查询：

  @media not all and（max-width： 512px）{* {color：red; }}  

 < span> Foobar< / span>  
 

https://css-tricks.com/logic-in-media-queries/#article-header-id -3

在CSS规范中，您可以找到媒体查询的以下语法。您可以看到 NOT 不能直接在表达式前面：

 ：[ONLY |不]？ S * media_type S * [AND S * expression] * 
 |表达式[AND S * expression] * 
; 
  

的https://www.w3.org/TR/css3-mediaqueries/#syntax

I have the following HTML page:

<style>
  @media not(max-width: 512px) { * { color: red; } }
</style>

Foobar

However, this is unresponsive to the window's width. The media rule is never applied. If I remove the not, it works as expected. What do I not understand about not(max-width)?

Yes, I know there are other ways to accomplish the same thing, and not(max-width: 512px) is the same as min-width: 513px and so on. However, for the system I am building I need to be able to specify not(max-width).

解决方案

You have to use the following media query:

@media not all and (max-width: 512px) {
  * { 
    color: red;
  } 
}

<span>Foobar</span>

https://css-tricks.com/logic-in-media-queries/#article-header-id-3

On the CSS specification, you can find the following syntax for media queries. You can see the NOT isn't allowed directly in front of the expression:

: [ONLY | NOT]? S* media_type S* [ AND S* expression ]* 
| expression [ AND S* expression ]*
;

https://www.w3.org/TR/css3-mediaqueries/#syntax

这篇关于not（max-width：512px）不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！