Cosa significano schermo @media e (larghezza massima: 1024px) nei CSS?

245

Ho trovato questo pezzo di codice in un file CSS che ho ereditato, ma non ne ho alcun senso:

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

In particolare, cosa sta succedendo in prima linea?

css media-queries

— Yarin
fonte

306

Questa è una query multimediale. Impedisce l'esecuzione del CSS al suo interno a meno che il browser non superi i test in esso contenuti.

I test in questa query multimediale sono:

@media screen- Il browser si identifica nella categoria "schermo". Ciò significa approssimativamente che il browser si considera di classe desktop - al contrario di un browser per cellulare più vecchio (si noti che l'iPhone e altri browser per smartphone si identificano nella categoria schermo) o uno screen reader - e che sta visualizzando la pagina sullo schermo, anziché stamparla.
max-width: 1024px- la larghezza della finestra del browser (inclusa la barra di scorrimento) è di 1024 pixel o inferiore. ( Pixel CSS, non pixel del dispositivo .)

Questo secondo test suggerisce che questo ha lo scopo di limitare i CSS a iPad, iPhone e dispositivi simili (poiché alcuni browser meno recenti non supportano max-widthle query multimediali e molti browser desktop hanno una larghezza maggiore di 1024 pixel).

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

Ecco le specifiche per le Media query, è abbastanza leggibile:

http://www.w3.org/TR/css3-mediaqueries/

— Paul D. Waite
fonte

se la mia larghezza dello schermo è superiore a 1200 px come specificare nello schermo

— @media

2

puoi semplicemente usare (larghezza minima: 1200px) invece di usare la larghezza massima, oppure potresti averlo come normale CSS senza una query multimediale e usare 'larghezza massima' per sovrascriverlo quando si passa a un dispositivo più piccolo

— MintWelsh

Esiste un modo per effettuare lo styling solo sul desktop (NON su tutti i dispositivi mobili) mentre si ridimensiona la finestra? Quindi, se ridimensionassi manualmente il mio browser a "larghezza massima di 720 px", utilizzerebbe un'istruzione multimediale che ti rileva su un desktop non mobile, e ora sei sotto 720 px, ad esempio?

— Wharfdale,

@ JordanC26: sembra che tu stia facendo una domanda, e per questo vuoi il pulsante “Poni domanda” vicino all'angolo in alto a destra dello schermo. Prima di usarlo, però, potresti voler definire cosa intendi per "desktop" e "mobile". Microsoft Surface è mobile o desktop? Perché? Che dire dei dispositivi futuri che non sono ancora stati inventati?

— Paul D. Waite,

55

Sta limitando gli stili qui definiti sullo schermo (ad es. Non stampare o altri supporti) e limita ulteriormente l'ambito a finestre che hanno una larghezza di 1024 px o inferiore.

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

— Chris Bentley
fonte

10

Dice: Quando la pagina viene visualizzata sullo schermo con una risoluzione massima di 1024 pixel di 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.

— Lorenzo
fonte

3

Non darei per scontato che lo sappia.

— jcolebrand,

6

Nel mio caso volevo centrare il mio logo su un sito Web quando il browser ha 800pxo meno, quindi l'ho fatto utilizzando il @mediatag:

@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 maggiori informazioni vedi questo .

— yehanny
fonte

5

Quelle sono le query multimediali . Ti consente di applicare parte delle regole CSS solo ai dispositivi specifici su una configurazione specifica.

— Crozin
fonte

2

Ho modificato il tuo link per essere un hashlink qui -> w3.org/TR/css3-mediaqueries/#media0 anziché qui -> w3.org/TR/css3-mediaqueries

— jcolebrand

1

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

— Kumar Nitesh
fonte

1

Se la condizione della query multimediale è vera, il CSS con quella condizione funzionerà. Ciò significa che il CSS all'interno della dimensione del pixel della condizione della query multimediale avrà effetto, altrimenti se la condizione non riuscirà significa che se la larghezza del dispositivo è maggiore di 1024 px rispetto al CSS non funzionerà. Perché la condizione della query multimediale è falsa.

max-width è il limite massimo CSS fino a quella larghezza.

— Anup
fonte

0

Vale anche la pena notare che è possibile utilizzare 'em' e 'px' - blog e siti basati su testo lo fanno perché in questo modo il browser prende decisioni di layout più relative al contenuto del testo.

Su Wordpress venticinque anni volevo che il mio slogan fosse visualizzato su dispositivi mobili e desktop, quindi l'ho inserito nel mio tema child style.css

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

— MattB
fonte

0

Prende di mira 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;

  }

lo snippet sopra riportato indica se il dispositivo che esegue questo programma ha uno schermo con larghezza 600px o inferiore a 600px, in questo caso il nostro programma deve eseguire questa parte.

— Shahin Ghasemi
fonte