Cosa significa @media screen e (max-width: 1024px) in CSS?

Ho trovato questo pezzo di codice in un file CSS che ho ereditato, ma non posso avere alcun senso da esso:

@media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } 

In particolare, cosa sta succedendo in prima linea?

Questa è una query multimediale. Impedisce che il CSS al suo interno venga eseguito a meno che il browser non superi i test che contiene.

I test in questa query multimediale sono:

  1. @media screen – Il browser si identifica nella categoria “screen”. Ciò significa che il browser si considera di class desktop – al contrario, ad esempio, di un vecchio browser per telefoni cellulari (si noti che l’iPhone e altri browser per smartphone si identificano come appartenenti alla categoria dello schermo) o uno screen reader e che sta visualizzando la pagina sullo schermo, piuttosto che stamparla.

  2. max-width: 1024px 1024 pixel max-width: 1024px la larghezza della finestra del browser (inclusa la barra di scorrimento) è pari o inferiore a 1024 pixel. ( Pixel CSS, non pixel del dispositivo .)

Questo secondo test suggerisce che questo è inteso a limitare il CSS a iPad, iPhone e dispositivi simili (perché alcuni browser più vecchi non supportano la max-width nelle query multimediali e molti browser desktop sono più larghi di 1024 pixel).

Tuttavia, si applicherà anche alle windows del browser desktop con larghezza inferiore a 1024 pixel, nei browser che supportano la query multimediale di max-width .

Ecco le specifiche di Media Queries, è abbastanza leggibile:

Limita gli stili definiti sullo schermo (ad esempio, non stampa o altri supporti) e limita ulteriormente l’ambito di visualizzazione a larghezza di 1024px o meno.

http://www.css3.info/preview/media-queries/

Dice: Quando la pagina viene visualizzata sullo schermo con una risoluzione massima di 1024 pixel in larghezza, applica la regola che segue.

Come forse già saprai, puoi indirizzare alcuni CSS a un tipo di supporto che può essere uno di palmare, schermo, stampante e così via.

Dai un’occhiata qui per i dettagli ..

Quella è Media Queries . Ti consente di applicare parte delle regole CSS solo ai dispositivi specifici su una configurazione specifica.

Nel mio caso volevo centrare il mio logo su un sito web quando il browser ha 800px o meno, quindi l’ho fatto usando il tag @media :

 @media screen and (max-width: 800px) { #logo { float: none; margin: 0; text-align: center; display: block; width: auto; } } 

Ha funzionato per me, spero che qualcuno trovi utile questa soluzione. 🙂 Per ulteriori informazioni vedere questo .

Significa che se la dimensione dello schermo è 1024, si applicano solo sotto le regole CSS.

Se la tua condizione di query multimediale è vera, il tuo css con quella condizione funzionerà, Ciò significa che il CSS nelle dimensioni della condizione della tua query multimediale avrà effetto, altrimenti se la condizione avrà esito negativo significa che se la larghezza del dispositivo è maggiore di 1024px rispetto a quella del tuo CSS non lavoro. Perché la tua condizione di query multimediale è falsa. max-width è il limite massimo di css fino a quella larghezza.

Inoltre, vale la pena notare che è ansible utilizzare “em” e “px”: i blog e i siti basati su testo lo fanno perché in tal caso il browser rende le decisioni di layout più relative al contenuto del testo.

Su WordPress twentysixteen volevo che il mio tagline fosse visualizzato su mobile e desktop, quindi lo ho inserito nel mio tema figlio style.css

 @media screen and (max-width:59em){ p.site-description { display: block; } } 

si rivolge ad alcune funzionalità specificate per eseguire altri codici …

per esempio:

 @media all and (max-width: 600px) { .navigation { -webkit-flex-flow: column wrap; flex-flow: column wrap; padding: 0; } 

il frammento sopra dice che se il dispositivo che esegue questo programma ha una schermata con 600px o meno di 600px di larghezza, in questo caso il nostro programma deve eseguire questa parte.