CSS Frage der Medien Negierung

Question

Ich mag würde diese Bedingung zu einer CSS-Medienabfrage zu transformieren:

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

Edit:

Eigentlich möchte ich Ipads in diesem Zustand zum Ziel:

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

Also sollte das CSS angewendet werden, wenn es irgendein Gerät und die aktuelle Breite < 1200px ODER wenn es ein Ipad ist (daher die min/max-Geräte-Breite) und es im Hochformat ist.

Danke!

Answer 1

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

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

Ich denke, dass Sie völlig den Teil mit max-device-width != 1024px überspringen, da es sich um eine Auflösung niedriger als 1200px ist und fallen unter diese Kategorie. Es hängt alles davon ab, welche Art von Bildschirmgröße Sie anstreben.

Ich denke, dass diese Frage eine gute Erklärung liefert, wie man sowohl min als auch max in derselben Abfrage verwendet. Example Question

1. AND (und Keyword)

erfordert, dass alle festgelegten Bedingungen vor den Styling-Regeln eingehalten werden müssen wirksam werden.

@media Bildschirm und (min-width: 700px) und (Orientierung: Landschaft) {...}

Die angegebenen Stilregeln nicht an ihrem Platz gehen, wenn nicht alle der folgenden bewerten als wahr:

Der Medientyp ist "Bildschirm" und Das Ansichtsfenster ist mindestens 700 Pixel breit und Bildschirmausrichtung ist derzeit Landschaft. Hinweis: Ich glaube, dass diese drei Featureabfragen zusammen eine einzelne Medienabfrage ergeben.

2. OR (kommagetrennte Liste)

eher als ein Schlüsselwort oder, durch Komma getrennte Listen werden zusammen in Verketten mehrerer Medien Abfragen eine komplexere Medien Regel

@media zu bilden Handheld (min-width: 650px), (Orientierung: Landschaft) {...}

Die angegebenen Stilregeln in Kraft treten werden, sobald irgendeine Medien Abfrage als wahr ausgewertet:

Th Der Medientyp ist "Handheld" oder Das Ansichtsfenster ist mindestens 650 Pixel breit oder Bildschirmausrichtung ist derzeit Landschaft.

3. NOT (nicht Schlüsselwort)

Das nicht Schlüsselwort verwendet werden kann, eine einzelne Medien Abfrage (und nicht um eine vollständige Medien Regel zu negieren - was bedeutet, dass es nur Einträge zwischen einem Satz von Kommata negiert und nicht die vollständige Medienregel nach der @ media-Deklaration).

Ebenso beachten Sie, dass das nicht Stichwort Medienanfragen negiert, kann es nicht eine einzelne Feature Abfrage innerhalb einer Medienabfrage zu negieren verwendet werden *

@media nicht Bildschirm und (min-Auflösung: 300 dpi). (Min -breite: 800px) {...}

Das Styling hier angegeben wird in Kraft treten, wenn

der Medientyp und min-Auflösung nicht beide ihre Anforderungen erfüllen (‚Bildschirm‘ und ‚300dpi‘ bzw.) oder Das Ansichtsfenster ist mindestens 800 Pixel breit. Mit anderen Worten, wenn der Medientyp "Bildschirm" ist und die Mindestauflösung 300 dpi beträgt, wird die Regel erst wirksam, wenn die Mindestbreite des Darstellungsbereichs mindestens 800 Pixel beträgt.

(Die nicht Schlüsselwort kann ein wenig funky Zustand sein Lassen Sie mich wissen, wenn ich es besser machen kann;..)

4. ONLY (nur keyword)

Wie ich es verstehe, die Nur das Schlüsselwort wird verwendet, um zu verhindern, dass ältere Browser neuere Medienabfragen fälschlicherweise als den früher verwendeten, schmaleren Medientyp interpretieren. Bei richtiger Verwendung sollten ältere/nicht kompatible Browser den Stil komplett ignorieren.

Ein älterer/nicht-konformer Browser würde nur diese Codezeile völlig ignorieren, ich glaube, da es das einzig Schlüsselwort lesen würde und es ein falscher Medientyp zu berücksichtigen. (Hier und hier für weitere Informationen von intelligenteren Menschen)

kopiert und aus dieser Antwort kopiert. Bitte lesen Sie es für weitere Informationen: THIS is the original answer.