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"; } }
- datenschutz (42x gelesen)
- windows-beschleunigen (41x gelesen)
- windows-defragmentieren-und-aufraeumen (36x gelesen)
- windows-geschwindigkeits-einstellungen (34x gelesen)
- pc-einsteigerkurs (30x gelesen)
Mehr Tipps zu Javascript und CSS Media Queries: wi...
-
Webmaster: Tabellenzeile mit CSS automatisch abwechselnd färben
Um die Hintergrundfarbe einer HTML Tabellenzeile mit einer Farbe zu versehen, hilft CSS. Für eine gute Lesbarkeit kann es aber gerade bei längeren Tabellen hilfreich...
-
Transparenter iFrame mit HTML und CSS
Transparenter iFrame - Dafür ist er praktisch: Mit einem transparenten iFrame kann man den Inhalt einer anderen Webseite in die aktuelle Seite einbetten. Ein vorhandenes...
-
CSS Transition: Warum es bei “visibility” nicht funktioniert – und was hilft!
Mit dem CSS Attribut "transition" lassen sich weiche Übergänge und auch CSS Animationen erzeugen: Durch die CSS Transition werden Zwischenwerte zwischen zwei Zuständen berechnet und...
-
VLC Media Player stürzt ab
Der VLC-Player gehört zu den beliebtesten Programmen zur Wiedergabe von Audio- und Videodateien. Es kann allerdings passieren, dass der VLC Media Player immer abstürzt, sobald...
-
Taskleistensteuerung des Windows Media Players zurückholen
Der Windows Media Player ist zwar für viele PC-User nicht gerade die erste Wahl, um Musik vom Computer zu hören, dennoch wird er immer noch...
-
Webseiten-Titel ändern oder animieren mit JavaScript (mehr Aufmerksamkeit bei Tabs!)
Der Webseiten-Titel wurde früher in der Titelleiste des Browsers angezeigt: Mittlerweile sieht man den Text oft nur noch bei mehreren geöffneten Tabs. Für Besucher, die...
- Media Encoder 11 macht Media Player und Media Center unbrauchbar!
- habe Window 7, 64 bit &möchte Window 8.1 32 bit installieren
- Medion E7416 startet mit Checking media presence..... No media presen
- VLC Media File in Windows Media Player abspielen
- No media present! boot media not found
- JavaScript Fehlermeldung
Also ich habe Windows7 Home Premium und den Firefox 19.Als ich ihn gestartet habe wollte der v...
- Betr.Javascript
Mein Computer-System:Windows 7 Firefox Installiertes Betriebssystem: 1 Hallo !Kann mir jemand ...
Javascript und CSS Media Queries: window.matchMedia nutzen!