Media queries w javascript

Responsive web design to tworzenie stron www przystosowanych do wyświetlania na różnych urządzeniach (np. zmiana układu w zależności od szerokości ekranu). Podstawowe użycie media queries w css pozwala w łatwy sposób tworzyć reguły dla różnych typów urządzeń, szerokości, wysokości, rozdzielczości, orientacji itp. Spójrzmy na poniższy przykład użycia media queries. Plik main.css jest serwowany dla wszystkich, natomiast wide.css tylko na urządzeniach o szerokości ekranu conajmniej 600px.

<link rel="stylesheet" media="all" href="main.css" />  
<link rel="stylesheet" media="(min-width: 600px)" href="wide.css" /> 

window.matchMedia

var mediaquery = window.matchMedia("(min-width: 600px)");
if (mediaquery.matches) {  
	//window width jest większe lub równe 600px  
}  
else {  
	//window width jest mniejsze od 600px  
}  

if (matchMedia) {
	var mediaquery = window.matchMedia("(min-width: 600px)");
	mediaquery.addListener(WidthChange);
	WidthChange(mediaquery);
}
function WidthChange(mediaquery) {
	if (mediaquery.matches) {
		//window width jest większe lub równe 600px  
	}
	else {
		//window width jest mniejsze od 600px
	}
}