Responsive Web Design - Media Queries @media

Area dedicato ai CSS
Rispondi
Avatar utente
alex75
Amministratore
Amministratore
Messaggi: 6270
Iscritto il: 23/08/2012, 23:45
Link del Forum: www.phpbb-italia.it
Località: Palermo

Responsive Web Design - Media Queries @media

Messaggio da alex75 »

Con il CSS3 vengono introdotte le Media Query.
Possiamo introdurre delle proprietà css a condizione che @media sia valido.
Ecco un esempio di utilizzo, che mostrerà uno sfondo nero se il browser dell'utente sia inferiore ai 600 pixel:

Codice: Seleziona tutto

@media only screen and (max-width: 600px) {
    body {
        background-color: black;
    }
}
Allo stesso modo potremmo inserire uno sfondo rosso per utenti che utilizzino browser con finestre Superiori a 600 pixel:

Codice: Seleziona tutto

[code]@media only screen and (min-width: 600px) {
    body {
        background-color: red;
    }
}
[/code]

L'uso è ovviamente dei più svariati, basta sostituire

Codice: Seleziona tutto

body {
        background-color: red;
    }
Con il vostro codice css, che avrà effetto soltanto sui browser dalle dimensione da voi scelte.
Regolamento Forum
Le nostre guide
Se l'assistenza prestata è stata di tuo gradimento potrai contribuire aiutandoci a sostenere le spese affrontate per tenere in vita questo forum >Cliccando sul seguente Link<
Rispondi