CSSメディアクエリ否定

Question

私はCSSメディアクエリにこの条件を変換したい：

if(min-device-width != 768px && max-device-width != 1024px && max-width == 1200px) { 
    // apply CSS 
} 

編集：

実は私はこの条件の範囲内のiPadをターゲットにしたい：

if((min-device-width != 768px && max-device-width != 1024px && max-width == 1200px) 
|| (min-device-width == 768px && max-device-width == 1024px && orientation == 'portrait')) { 
     // apply CSS 
} 

したがって、デバイスがあればCSSを適用し、現在の幅は< 1200pxです。つまり、Ipad（最小/最大デバイス幅）の場合はポートレートモードです。

ありがとうございます！

Answer 1

@media screen (max-device-width: 1200px) and (orientation: portrait) { 
    // apply CSS 
} 

    @media screen and (min-width: 768px) , (max-width: 1024px), (orientation: portrait) { 
    ... 
} 

私はそれが1200pxより解像度低くだと、そのカテゴリに該当するので、あなたは完全にmax-device-width != 1024pxで一部を省略していると思います。それはあなたが目指している画面サイズの種類に依存します。

この質問は、同じクエリでminとmaxの両方を使用する方法についての素晴らしい説明を提供すると思います。 Example Question

1. AND（キーワード）

スタイリング・ルールを有効にする前に、指定されたすべての条件が満たされなければならないことが必要です。

@media画面と（最小幅：700px）と（オリエンテーション：ランドスケープ）以下のすべてがtrueとして評価されない限り、{...}

指定されたスタイリング・ルールが所定の位置に行くことはありません。

メディアタイプが「スクリーン」で ビューポートの幅が700px以上で、 の場合、画面の向きは現在横向きです。 注：私は一緒に使用されると、これらの3つの機能クエリは1つのメディアクエリを構成すると考えています。むしろ又はキーワードより

2 OR（カンマ区切りリスト）

、カンマ区切りのリストは、より複雑なメディアのルールを形成するために一緒に複数のメディアクエリーを連鎖に使用さ

@mediaハンドヘルド、（最小幅：650px）、（方向：横）{...}

指定スタイルルールが一度いずれかのメディアクエリが真と評価効果になります：

のTh eメディアタイプが「ハンドヘルド」または ビューポートの幅が650px以上、または です。画面の向きは現在横向きです。

3. NOT（キーワードではありません）

ないキーワードは、単一のメディアクエリー（とNOTフルメディアルールを否定するために使用することができます - それは唯一のカンマのセットの間のエントリを否定することを意味し、 @media宣言に続く完全なメディアルールではない）。同様

、ないキーワードは、メディアクエリを否定することに注意し、メディアクエリ内の個々の機能クエリを否定することはできません*

@mediaない画面（MIN-解像度：300dpiの）、（MIN -width：メディアタイプとMin-解像度

が両方のそれぞれの要件（「スクリーン」と「300dpiの」を満たしていない場合は、ここで指定した800ピクセル）{...}

スタイリングが有効になります）または ビューポートの幅は少なくとも800ピクセルです。 つまり、メディアタイプが「スクリーン」で、最小解像度が300 dpiの場合、ビューポートの最小幅が800ピクセル以上にならない限り、ルールは有効になりません。

（ないキーワードは、状態に少しファンキーすることができ、私はもっとうまくできるかどうか私に教えてください;。。）

4. ONLY（キーワードのみ）

私はそれを理解し、 onlyキーワードを使用して、古いブラウザが以前使用されたより狭いメディアタイプとして新しいメディアクエリを誤解させないようにします。正しく使用すると、古い/準拠していないブラウザはスタイリングを完全に無視するだけです。

古い/非対応ブラウザがちょうど完全にこのコード行を無視し、私はそれが唯一のキーワードを読み、間違ったメディアタイプ検討すると信じています。 （よりスマートな人々のより多くの情報については、こことここを参照してください）

このアンサーからコピーしてペーストしました。詳細については、THIS is the original answer.