Quando si scrive una query multimediale CSS, è possibile specificare più condizioni con la logica "OR"?

Sto tentando di fare qualcosa del genere:

/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
  ...
}

Utilizzare una virgola per specificare due (o più) regole diverse:

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
  ...
}

Da https://developer.mozilla.org/en/CSS/Media_queries/

... Inoltre, è possibile combinare più media query in un elenco separato da virgole; se una qualsiasi query multimediale nell'elenco è vera, viene applicato il foglio di stile associato. Questo è l'equivalente di un'operazione logica "o".

Query multimediali CSS e operatori logici: una breve panoramica;)

La risposta rapida

Regole separate con virgole: @media handheld, (min-width: 650px), (orientation: landscape) { ... }

La lunga risposta

C'è molto qui, ma ho provato a renderlo denso di informazioni, non solo a scrivere soffici. È stata una buona occasione per imparare me stesso! Prenditi il ​​tempo per leggere sistematicamente però e spero che ti sarà utile.

Media query

Le query multimediali vengono essenzialmente utilizzate nel web design per creare esperienze di navigazione specifiche del dispositivo o della situazione; questo viene fatto usando la @mediadichiarazione all'interno del CSS di una pagina . Questo può essere usato per visualizzare una pagina web in modo diverso in un gran numero di circostanze: se sei su un tablet o una TV con diverse proporzioni, se il tuo dispositivo ha uno schermo a colori o in bianco e nero, o, forse più frequentemente, quando un utente cambia le dimensioni del proprio browser o passa da un dispositivo di navigazione all'altro con dimensioni dello schermo diverse (in generale, progettare in questo modo viene chiamato Responsive Web Design )

Operatori logici

Nella progettazione di queste situazioni, sembrano esserci quattro operatori logici che possono essere utilizzati per richiedere combinazioni più complesse di requisiti quando si prendono di mira una varietà di dispositivi o dimensioni delle finestre .

(Nota: se non capisci le differenze tra regole multimediali, query multimediali e query sulle funzionalità, consulta prima la sezione inferiore di questa risposta per conoscere meglio la terminologia associata alla sintassi delle query multimediali

1. AND ( e parola chiave)

Richiede che siano soddisfatte tutte le condizioni specificate prima che le regole di stile abbiano effetto.

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

Le regole di stile specificate non verranno applicate a meno che tutte le seguenti condizioni non siano vere:

• Il tipo di supporto è 'schermo' e
• Il viewport è largo almeno 700 px e
• L'orientamento dello schermo è attualmente orizzontale.

Nota: credo che utilizzate insieme, queste tre query di funzionalità costituiscano una singola query multimediale .

2. OPPURE ( elenchi separati da virgole )

Invece di una o una parola chiave, gli elenchi separati da virgola vengono utilizzati per concatenare più query multimediali per formare una regola multimediale più complessa

@media handheld, (min-width: 650px), (orientation: landscape) { ... }

Le regole di stile specificate entreranno in vigore una volta che una qualsiasi query multimediale viene valutata come vera :

1. Il tipo di supporto è "palmare" o
2. Il viewport è largo almeno 650 px o
3. L'orientamento dello schermo è attualmente orizzontale.

3. NOT ( non parola chiave)

La parola chiave not può essere utilizzata per negare una singola query multimediale (e NON una regola multimediale completa , il che significa che nega solo le voci tra una serie di virgole e non la regola multimediale completa dopo la dichiarazione @media).

Allo stesso modo, si noti che la non parola chiave nega le query multimediali, non può essere utilizzata per negare una singola query di funzionalità all'interno di una query multimediale. *

@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }

Lo stile qui specificato entrerà in vigore se

1. Il tipo di supporto E la risoluzione minima non soddisfano entrambi i requisiti (rispettivamente "schermo" e "300 dpi") o
2. La finestra ha una larghezza di almeno 800 pixel.

In altre parole, se il tipo di supporto è 'schermo' e la risoluzione minima è 300 dpi, la regola non entrerà in vigore a meno che la larghezza minima della finestra non sia almeno 800 pixel.

(La parola chiave not può essere un po 'funky da dichiarare. Fammi sapere se posso fare di meglio.;)

4. SOLO ( solo parola chiave)

A quanto ho capito, l' unica parola chiave viene utilizzata per impedire ai browser meno recenti di interpretare erroneamente le query multimediali più recenti come il tipo di supporto più ristretto utilizzato in precedenza. Se utilizzati correttamente, i browser meno recenti / non conformi devono semplicemente ignorare del tutto lo stile.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Un browser più vecchio / non conforme ignorerebbe del tutto questa riga di codice, credo che leggerebbe l' unica parola chiave e la considererebbe un tipo di supporto errato . (Vedi qui e qui per maggiori informazioni da persone più intelligenti)

PER MAGGIORI INFORMAZIONI

Per ulteriori informazioni (incluse altre funzionalità su cui è possibile eseguire query), consultare: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators

Comprensione della terminologia di Media Query

Nota: avevo bisogno di imparare la seguente terminologia perché tutto qui abbia senso, in particolare per quanto riguarda la parola chiave non . Ecco come lo capisco:

Una regola per i media (anche MDN sembra chiamare queste dichiarazioni dei media) include il termine @mediacon tutte le relative query sui media

@media all and (min-width: 800px)

@media only screen and (max-resolution:800dpi), not print

@media screen and (min-width: 700px), (orientation: landscape)

@media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)

Una media query è un insieme di query di funzionalità. Possono essere semplici come una query di funzionalità oppure utilizzare la parola chiave e per formare una query più complessa. Le query multimediali possono essere separate da virgola per formare regole multimediali più complesse (vedere la parola chiave o sopra).

screen (Nota: qui viene utilizzata solo una query di funzionalità.)

only screen

only screen and (max-resolution:800dpi)

only tv and (device-aspect-ratio: 16/9) and (color)

NON handheld, (min-width: 650px). (Nota la virgola: ci sono due media query qui.)

Una query di funzionalità è la parte più semplice di una regola multimediale e riguarda semplicemente una determinata funzionalità e il suo stato in una determinata situazione di navigazione.

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

Frammenti di codice e informazioni derivate da:

Query multimediali CSS fornite da Mozilla Contributors (con licenza CC-BY-SA 2.5 ). Alcuni esempi di codice sono stati usati con piccole modifiche per (si spera) aumentare la chiarezza della spiegazione.

Esistono due modi per scrivere una media query corretta in CSS. Se stai scrivendo prima query multimediali per dispositivi più grandi, il modo corretto di scrivere sarà:

@media only screen 
and (min-width : 415px){
    /* Styles */
}

@media only screen 
and (min-width : 769px){
    /* Styles */
}

@media only screen 
and (min-width : 992px){
    /* Styles */
}

Ma se stai scrivendo prima query multimediali per dispositivi più piccoli, sarebbe qualcosa del tipo:

@media only screen 
and (max-width : 991px){
    /* Styles */
}

@media only screen 
and (max-width : 768px){
    /* Styles */
}

@media only screen 
and (max-width : 414px){
    /* Styles */
}