Qualcuno può spiegare le richieste dei media CSS?

Question

Ho letto l'articolo su di loro al css3.info, ma non mi sembrava che lo spiegasse abbastanza bene. Inoltre, non sono riuscito a far cambiare i loro esempi con le dimensioni dello schermo. Ho provato in Safari, FF, Chrome.

È una funzionalità che non è ancora pronta per l'impianto?

Se si desidera regolare alcuni stili quando la finestra del browser è inferiore a 1024px. Come lo posso fare?

Answer 1

La regola applicata alle dimensioni dello schermo significa che, citando specifica W3C "è utilizzabile su schermo e dispositivi palmari se la larghezza della finestra è" nei limiti specificati.

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

Se si desidera regolare lo stile quando la finestra è inferiore a 1024px è possibile utilizzare questa regola:

@media screen and (max-width: 1024px) { … } 

in ogni caso questa regola vale solo per la finestra dimensione reale. Se ridimensioni la vista senza ricaricare la pagina, gli stili non verranno applicati.

Answer 2

Per applicare un foglio di stile a un documento quando visualizzate su un ampio schermo superiore a 800 pixel:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" > 

Per applicare un foglio di stile a un documento quando vengono visualizzati su qualsiasi dispositivo di larghezza inferiore a 400 pixel:

<link rel="stylesheet" media="all and (max-device-width: 400px)" > 

all'interno

@media all and (max-width:800px) { 
    body { color: red; } 
} 

per iphone

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

:: combining media query

Answer 3

Per vedere come i diversi media query reagiscono sul ridimensionamento o modificare l'orientamento, provare la demo in questa pagina:

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

È possibile regolare la media query attribuisce ad avere un'idea di come influenzano una pagina .

Answer 4

Ecco alcuni progetti che risolvono questo problema e sono in prima linea di CSS e schermo da dinamiche:

• 320 and up:

  '320 e Up' impedisce dispositivi mobili da scaricare le risorse desktop da utilizzando il foglio di stile di un piccolo schermo come il suo punto di partenza.

• Lessframework:

  Meno Framework è un sistema a griglia CSS per la progettazione di siti web adattivi.Lo contiene 4 layout e 3 set di preset di tipografia , tutti basati su una griglia singola .