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

Można również sprawdzać media queries w javascript poprzez odpowiednie api. Kluczowy jest tu obiekt window.matchMedia. Przekazujemy zapytanie takie jak w css. Następnie sprawdzamy czy właściwość matches zwróciła true czy false (jak poniżej).
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  
}  
Możemy przypisać też odpowiednie zdarzenie, które będzie się odpalać kiedy zaszła zmiana w szerokości.
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
	}
}
Obsługa css3 media queries przez przeglądarki. W IE8 i starszych możemy użyć skryptu css3-mediaqueries-js.
Więcej na temat media queries i responsive web design.

Komentarze 0

Dodaj komentarz