はありません（最大幅：512px）：ただし、これはウィンドウの<code>width</code>に応答しない</p> <pre><code><style> @media not(max-width: 512px) { * { color: red; } } </style> Foobar </code></pre> <p>私は次のHTMLページを持っている

Question

を働いていません。メディアルールは適用されません。 notを削除すると、正常に動作します。 not(max-width)について何か分かりませんか？

はい、私は同じことを達成するための他の方法があることを知っていて、not(max-width: 512px)はmin-width: 513pxと同じです。しかし、私が構築しているシステムでは、not(max-width)を指定する必要があります。

Answer 1

あなたは次のメディアクエリを使用する必要があります：CSSの仕様に

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

<span>Foobar</span>

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

を、あなたはメディアクエリの次の構文を見つけることができます。あなたが見ることができるNOTを直接表現の前に許可されていません。

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

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