Javascript und CSS Media Queries: window.matchMedia nutzen!

Mit den CSS Media Queries hat man praktische Funktionen für responsive Websites: Damit kann man die Webseite per CSS direkt für die Größe (z.B. Breite) des Bildschirms anpassen. Für manche Funktionen braucht man aber auch Javascript: Hier ist es oft praktisch, wenn das Skript auch auf die Media Eigenschaften von CSS zugreifen kann!

 
Beispiele für CSS Media Queries:

Mit diesem CSS Code passt man die Schriftgröße von einem Div-Element an die Breite des Bildschirms an: Auf kleineren Handy-Bildschirmen wird die Schrift dann kleiner angezeigt, ab einer Breite von 800 Pixeln größer:

<style type="text/css">
@media screen and (max-width: 600px) {
   #textblock { font-size:12px; }
}

@media screen and (max-width: 800px) {
   #textblock { font-size:14px; }
}
<style>

CSS Media Queries und Javascript

Für manche Funktionen (zum Beispiel bei Scroll-Events) braucht man aber Javascript. Auch hier kann man auf die MediaQueries von CSS zurückgreifen! Der Code dafür lautet:

var mediaquery = window.matchMedia("(max-width: 700px)");

Abfragen kann man es ganz einfach mit:

if(mediaquery.matches) { ... }

 
Ein Beispiel für eine Funktion, bei der man per Javascript auf die Media Queries zugreifen muss um die Breite zu erfahren, ist unsere Parallax-Scrollfunktion. Unter Umständen scheinen Elemente bei dem Scrollen wieder durch den Hintergrund durch, wenn man die Funktion auf kleineren Bildschirmen nutzt.

Hier setzen wir sie daher ab einer bestimmten Scroll-Höhe auf unsichtbar (visibility:hidden). Das muss bei kleinerem Bildschirm aber schon vorher passieren, daher kann man mit dieser Javascript-Funktion über die CSS Media Queries die maximale Bildschirmbreite abfragen:

 
Besispiel für CSS Media Queries in Javascript:

window.onscroll = function() {myFunction()};

function myFunction() {
   var abstand = 0;
   var mediaquery = window.matchMedia("(max-width: 700px)")

   if (mediaquery.matches) { 
      abstand = 850;
   } else {
	  abstand = 1050;
   }

   if(window.pageYOffset < abstand) {	
	  document.getElementById("div").style.visibility = "visible";
   }
   if(window.pageYOffset >= abstand) {
	  document.getElementById("div").style.visibility  = "hidden";
   }
}

 
Beispiele für CSS Media Queries:

Mit diesem CSS Code passt man die Schriftgröße von einem DIV an die Breite des Bildschirms an: Auf kleineren Handy-Bildschirmen wird die Schrift dann kleiner angezeigt:

<style type="text/css">
@media screen and (max-width: 600px) {
   #textblock { font-size:12px; }
}

@media screen and (max-width: 800px) {
   #textblock { font-size:14px; }
}
<style>

CSS Media Queries und Javascript

Für manche Funktionen (zum Beispiel bei Scroll-Events) braucht man aber Javascript. Auch hier kann man auf die MediaQueries von CSS zurückgreifen! Der Code dafür lautet:

var mediaquery = window.matchMedia("(max-width: 700px)");

Abfragen kann man es ganz einfach mit:

if(mediaquery.matches) { ... }

 
Ein Beispiel für eine Funktion, bei der man per Javascript auf die Media Queries zugreifen muss, um die Breite zu erfahren, ist unsere Parallax-Scrollfunktion. Unter Umständen scheinen Elemente bei dem Scrollen wieder durch den Hintergrund durch, wenn man die Funktion auf kleineren Bildschirmen nutzt.

Hier setzen wir sie daher ab einer bestimmten Scroll-Höhe auf unsichtbar (visibility:hidden). Das muss bei kleinerem Bildschirm aber schon vorher passieren, daher kann man mit dieser Javascript-Funktion über die CSS Media Queries die maximale Bildschirmbreite abfragen:

 
Besispiel für CSS Media Queries in Javascript:

window.onscroll = function() {myFunction()};

function myFunction() {
   var abstand = 0;
   var mediaquery = window.matchMedia("(max-width: 700px)")

   if (mediaquery.matches) { 
      abstand = 850;
   } else {
	  abstand = 1050;
   }

   if(window.pageYOffset < abstand) {	
	  document.getElementById("div").style.visibility = "visible";
   }
   if(window.pageYOffset >= abstand) {
	  document.getElementById("div").style.visibility  = "hidden";
   }
}