Responsive Web Design - Media Queries @media

Area dedicato ai CSS
Rispondi
Avatar utente
alex75
Amministratore
Amministratore
Connesso: Sì
Messaggi: 4378
Iscritto il: 23/08/2012, 23:45
Versione phpBB3: 3.2.8
Stile utilizzato: Prosilver
Versione SEO: SI
Mod / Estensioni installate: Si
Forum: www.phpbb-store.it
Località: palermo

Responsive Web Design - Media Queries @media

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.
Regolamento Forum
Programmi utili
Le nostre guide
Scambio Banner
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