Responsive Web Design - Media Queries @media

alex75 · Messaggio da **alex75** » 20/07/2016, 23:58

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.