La conoscenza e lo sviluppo del responsive design è oggi diventata indispensabile. In questa miniguida andremo a vedere come implementare Javascript nel nostro sito tramite le media query. L’API che andremo a scoprire è window.matchMedia a cui passeremo una media query identica a quella che utilizziamo nel CSS.

 


var mq = window.matchMedia("(max-width: 768px)");

 

La proprietà matches ritornerà true o false in base al risultato della query:

 


if (mq.matches) {
	//  codice se la finestra è inferiore a 768px(larghezza ipad);
}
else {
	// codice se la finestra è superiore a 768px;
}

 

Possiamo anche aggiungere un listener all’evento ‘cambio della larghezza della finestra':

 



// handler
if (matchMedia) {
	var mq = window.matchMedia("(max-width: 768px)");
	mq.addListener(WidthChange);
	WidthChange(mq);
}

// cambio della query 
function WidthChange(mq) {

	if (mq.matches) {
		// codice se la finestra è inferiore a 768px;
} else { // codice se la finestra è superiore a 768px;
} }


Sperando che questa guida sia stata utile non perdetevi le prossime mini guide con altre 2 metodi per implementare il vostro sito web con le media query.

Leave a comment