Corsi on-line

Media Query e JavaScript per il Responsive Design

Delle Media Query abbiamo già parlato più volte, si tratta di funzionalità CSS che permettono di disporre di regole di stile differenti a seconda del dispositivo utilizzato per la visualizzazione; tale caratteristica rende questi costrutti particolarmente utili per i progetti legati al Responsive Design. Le media Media Query consentono quindi di porre delle condizioni, implementabili per esempio tramite JavaScript, sulla base dell’ecosistema di riferimento.

css

Per la definizione di una Media Query questa va prima introdotta attraverso l’attributo media, fatto ciò tutte le regole stabilite al suo interno diverranno applicabili nel caso in cui la condizione definita si dovesse dimostrare valida; un semplice esempio di quanto detto potrebbe essere il seguente:

@media all and (max-width: 500px) {
    body {
        background: #FF7F00;
    }
}

Nel caso proposto in esempio avremo quindi l’applicazione di una regola di stile condizionata ad una dimensione massima. Nella realizzazione di Web applications il concetto di “responsive” può essere integrato con quello di “adaptive“, per cui potremmo utilizzare JavaScript per creare un’unica soluzione valida per le varie aree di visualizzazione; vediamo come:

var mql = window.matchMedia('@media all and (max-width: 500px)');
if(mql.matches) {
    // regola per larghezze superiori ai 500px
} else {
    // regola per larghezze inferiori ai 500px
}

Alla base del costrutto condizionale introdotto vi è la funzione window.matchMedia che restituisce un oggetto con cui rappresentare il risultato di un parsing a carico di una Media Query; tale oggetto verrà passato al metodo matches() che lo utilizzerà come valore di confronto nella condizione introdotta tramite il costrutto if/else.

Post correlati
I più letti del mese
Tematiche