Elenco separato da virgole di query multimediali non funzionanti

Question

Sto codificando un sito con AngularJS e SCSS. Sono nella fase mobile dello sviluppo e ho scoperto rapidamente (per questo progetto) che avevo bisogno di un modo per individuare più punti di interruzione utilizzando una query @media. Così ho trovato tramite this SO answer e this CSS Tricks Post e più altre risposte su SO. Poi ho implementato le soluzioni che ho trovato in un caso di test, vedere lo snippet qui sotto per il test.

main { 
    background-color: grey; 
    height: 100%; 
    min-height: 1000px; 

    @media (max-width: 992px) { 
     background-color: red 
    } 

    @media (max-width: 768px) { 
     background-color: lightcoral 
    } 

    @media (max-width: 992px), (max-width: 992px) and (orientation: landscape) { 
     background-color: lightgreen; 
    } 

    @media (max-width: 768px), 
    (max-width: 768px) and (orientation: landscape) { 
     background-color: lightblue; 
     // Reset the min-height here, because we no longer have the sticky search bar. 
     min-height: 450px; 
    } 
} 

<main> 
    <h1>Page Title</h1> 
    <h2>Some Descriptive information</h2> 

    <div>Content</div> 
</main> 

Ma io non sono stato in grado di farlo funzionare. Quello che sto cercando di fare, in definitiva, sono gli stili che vengono applicati quando l'utente è in orizzontale su un tablet o telefono. Tuttavia, non so se lo sto facendo bene o usando l'operatore or correttamente.

Semplicemente non funziona, beh, la prima istruzione (ad esempio: (max-width: 992px)) funziona, ma la seconda non è vera. Secondo Mozilla:

Gli elenchi separati da virgola si comportano come l'operatore logico o quando vengono utilizzati nelle query multimediali. Quando si utilizza un elenco separato da virgole di query multimediali, se una qualsiasi delle query multimediali restituisce true, gli stili o i fogli di stile vengono applicati. Ogni query multimediale in un elenco separato da virgole viene trattata come una singola query e qualsiasi operatore applicato a una query multimediale non influisce sugli altri. --- Mozilla Documentation

Anche se rompo il codice in due media query separate:

@media (max-width: 992px) { 
    background-color: lightgreen; 
} 
@media (max-width: 992px) and (orientation: landscape) { 
    background-color: lightgreen; 
} 

E ancora non funziona. Quindi non so se sto prendendo di mira la larghezza sbagliata (quando in landscape) o cosa sto facendo male. Qualche altro front-end sviluppatore può dirmi perché le mie virgolette separate da virgole non funzionano?

EDIT: Ecco il codice nativo SCSS:

main { 
    background-color: $mono-90; 
    height: 100%; 
    min-height: 1000px; 

    @media screen and (max-width: map_get($grid-breakpoints, 'md')) { 
     // Reset the min-height here, because we no longer have the sticky search bar. 
     min-height: 450px; 
    } 

    @media 
    (max-width: map_get($grid-breakpoints, 'lg')), 
    (max-width: map_get($grid-breakpoints, 'lg')) and (orientation: landscape){ 
     background-color: lightgreen; 
    } 

    @media 
    (max-width: map_get($grid-breakpoints, 'md')), 
    (max-width: map_get($grid-breakpoints, 'md')) and (orientation: landscape){ 
     background-color: lightblue; 
    } 

    @media 
    (max-width: map_get($grid-breakpoints, 'sm')), 
    (max-width: map_get($grid-breakpoints, 'sm')) and (orientation: landscape){ 
     background-color: lightcoral; 
    } 
} 

EDIT: Per la raccomandazione di @Godwin, ho semplificato le mie @media domande a questo:

main { 
    background-color: $mono-90; 
    height: 100%; 
    min-height: 1000px; 

    @media screen and (max-width: map_get($grid-breakpoints, 'md')) { 
     // Reset the min-height here, because we no longer have the sticky search bar. 
     min-height: 450px; 
    } 

    @media screen and (max-width: map_get($grid-breakpoints, 'lg')) { 
     background-color: lightgreen; 
    } 

    @media screen and (max-width: map_get($grid-breakpoints, 'md')) { 
     background-color: lightblue; 
    } 

    @media screen and (max-width: map_get($grid-breakpoints, 'sm')) { 
     background-color: lightcoral; 
    } 
} 

Tuttavia, non funziona su iPad Landscape (1024x768). I non lo lo voglio mostrare su computer portatili, ma do lo voglio mostrare su iPad in posizione orizzontale.

Answer 1

Tuttavia, non funziona su iPad Landscape (1024x768). Non voglio che venga mostrato nei computer portatili, ma è necessario che venga visualizzato su iPad in Posizione orizzontale.

io non sono sicuro di quello che si sta definendo con esso dal momento che non stai nascondendo nulla nei tuoi esempi così sto andando riferisco a:

Quello che sto cercando di fare , in definitiva, sono gli stili che vengono applicati quando l'utente è in orizzontale su un tablet o telefono.

Orientation on MDM è definita come la seguente:

Questo valore non corrisponde all'orientamento dispositivo reale.

Indica solo se il viewport è in modalità orizzontale (il display è più largo di quanto è alto) o verticale (il display è più alto di quanto non sia).

Hai detto che l'iPad in orizzontale ha una risoluzione di 1024x768, quindi per indirizzare un iPad o un telefono in modalità orizzontale, puoi impostare una query multimediale indirizzando tutti i dispositivi con una larghezza massima di 1024 pixel e in modalità orizzontale (la display è più largo che alto):

main { 
    background-color: grey; 
    height: 100%; 
    min-height: 1000px; 
    width: 100%; 

    @media screen and (max-width: 1024px) and (orientation: landscape) { 
    background-color: lightblue; 
    } 
} 

è possibile controllare un esempio su this codepen.

Se il viewport ha una larghezza superiore a 1024px, l'elemento main sarà grigio, non importa quale.

se si ridimensiona la finestra del browser per avere una finestra con una larghezza uguale o inferiore a 1024px, e hanno una finestra considerata nel paesaggio (il display è più ampio di quello che è alto), ad esempio un iPad in modalità orizzontale (1024x768), la media query attiverà e applicare uno sfondo blu:

se si ridimensiona la finestra del browser per avere ancora una finestra con un con uguale o inferiore a 1024px, ma hanno un'altezza maggiore della larghezza, il viewport non è più consi essere in modalità orizzontale ma passare alla modalità verticale. In questo momento, la media query non è più essere attivato e fallback ad un elemento grigio:

Quindi per quanto riguarda la tua domanda, l'esempio è una media query per applicare stili per l'utente utilizzando un tablet o telefono in modalità orizzontale.

Answer 2

Ecco una soluzione Speri che questo sarà il lavoro per voi

main { 
 
    background-color: grey; 
 
    height: 100%; 
 
    min-height: 1000px; 
 
} 
 
     
 
    @media (max-width: 992px) and (orientation:portrait) { 
 
\t \t main{ 
 
     background-color: red 
 
\t \t } 
 
    } 
 

 
    @media (max-width: 768px) and (orientation:portrait) { 
 
\t \t main{ 
 
     background-color: lightcoral 
 
\t \t } 
 
    } 
 
@media (max-width: 992px) and (orientation: landscape) { 
 
\t \t main{ 
 
     background-color: lightgreen; 
 
\t \t } 
 
    } 
 

 
    @media (max-width: 768px) and (orientation: landscape) { 
 
\t \t main{ 
 
     background-color: lightblue; 
 
     min-height: 450px; 
 
\t \t } 
 
    }

<main> 
 
    <h1>Page Title</h1> 
 
    <h2>Some Descriptive information</h2> 
 

 
    <div>Content</div> 
 
</main>