{"id":43524,"date":"2021-09-15T09:49:55","date_gmt":"2021-09-15T07:49:55","guid":{"rendered":"https:\/\/kinsta.com\/?p=102257"},"modified":"2023-07-27T12:13:32","modified_gmt":"2023-07-27T11:13:32","slug":"javascript-media-query","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/","title":{"rendered":"Eine ausf\u00fchrliche Anleitung zur Verwendung von Media Queries in JavaScript"},"content":{"rendered":"<p>Die meisten modernen Webseiten verwenden <a href=\"https:\/\/kinsta.com\/de\/blog\/responsiven-webdesign\/\">responsive Webdesign<\/a>-Techniken, um sicherzustellen, dass sie gut aussehen, lesbar sind und auf Ger\u00e4ten mit jeder Bildschirmgr\u00f6\u00dfe nutzbar bleiben, d.h. auf Handys, Tablets, Laptops, Desktop-PCs, Fernsehern, Projektoren und mehr.<\/p>\n<p>Seiten, die diese Techniken verwenden, haben eine einzige Vorlage, die das Layout je nach Bildschirmgr\u00f6\u00dfe anpasst:<\/p>\n<ul>\n<li>Kleinere Bildschirme zeigen in der Regel eine lineare, einspaltige Ansicht, in der Bedienelemente wie <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-menu-plugins\/\">Men\u00fcs<\/a> durch Anklicken von (Hamburger-)Symbolen aktiviert werden.<\/li>\n<li>Gr\u00f6\u00dfere Bildschirme zeigen mehr Informationen, vielleicht mit horizontal ausgerichteten Seitenleisten. UI-Steuerelemente wie z. B. Men\u00fcpunkte k\u00f6nnen immer sichtbar sein, um den Zugriff zu erleichtern.<\/li>\n<\/ul>\n<p>Ein wichtiger Bestandteil des responsiven Webdesigns ist die Implementierung einer <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-css\/\">CSS<\/a>&#8211; oder JavaScript-Medienabfrage, um die Gr\u00f6\u00dfe des Ger\u00e4ts zu erkennen und automatisch das passende Design f\u00fcr diese Gr\u00f6\u00dfe anzuzeigen. Wir werden nun er\u00f6rtern, warum diese Abfragen wichtig sind und wie man damit arbeitet, aber zuerst wollen wir uns mit responsivem Design im Allgemeinen besch\u00e4ftigen.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Warum ist Responsive Design wichtig?<\/h2>\n<p>Es ist unm\u00f6glich, ein <a href=\"https:\/\/kinsta.com\/de\/blog\/responsiven-webdesign\/\">einziges Seitenlayout<\/a> anzubieten und zu erwarten, dass es \u00fcberall funktioniert.<\/p>\n<p>Als Mobiltelefone in den fr\u00fchen 2000er Jahren erstmals einen rudiment\u00e4ren Internetzugang erhielten, erstellten die Betreiber von Seiten oft zwei oder drei verschiedene Seitenvorlagen, die sich grob an der mobilen und der Desktop-Ansicht orientierten. Das wurde immer unpraktischer, als die Vielfalt der Ger\u00e4te exponentiell zunahm.<\/p>\n<p>Heute gibt es zahlreiche Bildschirmgr\u00f6\u00dfen, von winzigen Armbanduhren bis hin zu riesigen 8-K-Monitoren und mehr. Selbst wenn du nur Mobiltelefone betrachtest, k\u00f6nnen aktuelle Ger\u00e4te eine h\u00f6here Aufl\u00f6sung haben als viele Low-End-Laptops.<\/p>\n<p>Auch die Nutzung von Mobiltelefonen ist inzwischen <a href=\"https:\/\/gs.statcounter.com\/platform-market-share\/desktop-mobile-tablet\">gr\u00f6\u00dfer als die von Desktop Computern<\/a>. Wenn du deine Seite nicht auf eine bestimmte Gruppe von Nutzern ausrichtest, kannst du davon ausgehen, dass die Mehrheit der Besucher von einem Smartphone aus auf die Seite zugreift. Ger\u00e4te mit kleinen Bildschirmen sind nicht l\u00e4nger ein nachtr\u00e4glicher Gedanke und sollten von Anfang an ber\u00fccksichtigt werden, auch wenn die meisten Webdesigner\/innen, Entwickler\/innen und Kund\/innen weiterhin einen Standard-PC verwenden.<\/p>\n<p>Google hat die Bedeutung von Mobilger\u00e4ten erkannt. <a href=\"https:\/\/kinsta.com\/de\/blog\/google-mobile-first-index\/\">Seiten werden in der Google-Suche besser gerankt,<\/a> wenn sie benutzerfreundlich sind und auf einem Smartphone gut funktionieren. Gute Inhalte sind nach wie vor wichtig, aber eine langsam ladende Seite, die sich nicht an die Bildschirmgr\u00f6\u00dfe deiner Nutzer\/innen anpasst, k\u00f6nnte deinem Unternehmen schaden.<\/p>\n<p>Und schlie\u00dflich solltest du auf Barrierefreiheit achten. Eine Seite, die f\u00fcr jeden funktioniert, egal welches Ger\u00e4t er oder sie benutzt, erreicht ein gr\u00f6\u00dferes Publikum. In vielen L\u00e4ndern ist Barrierefreiheit gesetzlich vorgeschrieben, aber auch wenn das in deinem Land nicht der Fall ist, solltest du bedenken, dass mehr Besucher\/innen zu mehr Conversions und h\u00f6herer Rentabilit\u00e4t f\u00fchren.<\/p>\n\n<h2>Wie funktioniert Responsive Design?<\/h2>\n<p>Die Grundlage des responsive Designs sind <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/Media_Queries\">Media-Queries<\/a>: eine CSS-Technologie, die Stile entsprechend der Ausgabeart (Bildschirm, Drucker oder sogar Sprache), der Bildschirmabmessungen, des Seitenverh\u00e4ltnisses, der Ger\u00e4teausrichtung, der Farbtiefe und der Zeigergenauigkeit anwenden kann. Media-Queries k\u00f6nnen auch die Vorlieben der Nutzer\/innen ber\u00fccksichtigen, z. B. reduzierte Animationen, Hell\/Dunkel-Modus und h\u00f6herer Kontrast.<\/p>\n<p>In den gezeigten Beispielen werden Medienabfragen nur f\u00fcr die Bildschirmbreite verwendet, aber Seiten k\u00f6nnen noch viel flexibler sein. Weitere Informationen findest du in der <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries\">vollst\u00e4ndigen Liste der Optionen auf MDN<\/a>.<\/p>\n<p><a href=\"https:\/\/caniuse.com\/css-mediaqueries\">Die Unterst\u00fctzung f\u00fcr Media Queries ist hervorragend<\/a> und wird von den Browsern seit mehr als einem Jahrzehnt unterst\u00fctzt. Nur der IE8 und darunter haben keine Unterst\u00fctzung. Sie ignorieren Stile, die von Media Queries angewendet werden, aber das kann manchmal ein Vorteil sein (mehr dazu im Abschnitt <strong>Best Practices<\/strong> weiter unten).<\/p>\n<p>Es gibt drei Standardmethoden, um Stile mit Media Queries anzuwenden. Bei der ersten werden bestimmte Stylesheets in den <a href=\"https:\/\/kinsta.com\/de\/blog\/html-vs-html5\/\">HTML-Code<\/a> geladen. Der folgende Tag l\u00e4dt zum Beispiel das Stylesheet <strong>wide.css<\/strong>, wenn ein Ger\u00e4t einen Bildschirm hat, der mindestens 800 Pixel breit ist:<\/p>\n<pre><code class=\"language-html\">&lt;link rel=\"stylesheet\" media=\"screen and (min-width: 800px)\" href=\"wide.css\" \/&gt;<\/code><\/pre>\n<p>Zweitens k\u00f6nnen Stylesheets mit einer @import at-Regel bedingt in CSS-Dateien geladen werden:<\/p>\n<pre><code class=\"language-css\">\/* main.css *\/\n@import url('wide.css') screen and (min-width: 800px);<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Beachte, dass <code>@import<\/code> vermieden werden sollte, weil jede importierte CSS-Datei das Rendering blockiert. HTML <code>&lt;link&gt;<\/code> Tags werden parallel heruntergeladen, w\u00e4hrend <code>@import<\/code> die Dateien nacheinander herunterl\u00e4dt.<\/p>\n<\/aside>\n\n<p>Normalerweise wendest du Media Queries in Stylesheets an, indem du einen @media CSS at-rule-Block verwendest, der bestimmte Stile ver\u00e4ndert. Zum Beispiel:<\/p>\n<pre><code class=\"language-css\">\/* default styles *\/\nmain {\n  width: 400px;\n}\n\n\/* styles applied when screen has a width of at least 800px *\/\n@media screen and (min-width: 800px) {\n  main {\n    width: 760px;\n  }\n}<\/code><\/pre>\n<p>Entwickler k\u00f6nnen die Regeln f\u00fcr Medienabfragen anwenden, die erforderlich sind, um das Layout einer Seite anzupassen.<\/p>\n<h2>Bew\u00e4hrte Verfahren f\u00fcr Media Query<\/h2>\n<p>Als die ersten Media Queries entwickelt wurden, entschieden sich viele Seiten f\u00fcr eine Reihe starrer Layouts. Dies ist konzeptionell einfacher zu gestalten und zu programmieren, weil es eine begrenzte Anzahl von Seitenvorlagen effektiv reproduziert. Ein Beispiel:<\/p>\n<ol>\n<li>Bei einer Bildschirmbreite von weniger als 600 Pixel wird ein 400 Pixel breites, mobiles Layout verwendet.<\/li>\n<li>Bei einer Bildschirmbreite zwischen 600px und 999px wird ein 600px breites Tablet-\u00e4hnliches Layout verwendet.<\/li>\n<li>Bei einer Bildschirmbreite von mehr als 1.000px wird ein 1000px breites desktop\u00e4hnliches Layout verwendet.<\/li>\n<\/ol>\n<p>Die Technik ist fehlerhaft. Die Ergebnisse auf sehr kleinen und sehr gro\u00dfen Bildschirmen k\u00f6nnen schlecht aussehen, und die CSS-Wartung kann erforderlich sein, wenn sich Ger\u00e4te und Bildschirmgr\u00f6\u00dfen mit der Zeit \u00e4ndern.<\/p>\n<p>Eine bessere Option ist die Verwendung eines <a href=\"https:\/\/kinsta.com\/de\/blog\/google-mobile-first-index\/\">Mobile-First<\/a>-Fluid-Designs mit Haltepunkten, die das Layout bei bestimmten Gr\u00f6\u00dfen anpassen. Im Wesentlichen verwendet das Standardlayout die einfachsten Stile f\u00fcr kleine Bildschirme, die Elemente in linearen vertikalen Bl\u00f6cken positionieren.<\/p>\n<p>Zum Beispiel <code>&lt;article&gt;<\/code> und <code>&lt;aside&gt;<\/code> innerhalb eines <code>&lt;main&gt;<\/code> Containers:<\/p>\n<pre><code class=\"language-css\">\/* default small-screen device *\/\nmain {\n  width: 100%;\n}\n\narticle, aside {\n  width: 100%;\n  padding: 2em;\n}<\/code><\/pre>\n<p>Hier ist das Ergebnis in allen Browsern &#8211; auch in sehr alten, die keine Media Queries unterst\u00fctzen:<\/p>\n<figure id=\"attachment_102292\" aria-describedby=\"caption-attachment-102292\" style=\"width: 626px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/site-linear-example.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-102292 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/site-linear-example.png\" alt=\"Beispiel-Screenshot ohne Media Query-Unterst\u00fctzung\" width=\"626\" height=\"200\"><\/a><figcaption id=\"caption-attachment-102292\" class=\"wp-caption-text\">Beispiel-Screenshot ohne Media Query-Unterst\u00fctzung<\/figcaption><\/figure>\n<p>Wenn Media Queries unterst\u00fctzt werden und der Bildschirm eine bestimmte Breite \u00fcberschreitet, z.B. 500px, k\u00f6nnen die <code>&lt;article&gt;<\/code> und <code>&lt;aside&gt;<\/code> Elemente horizontal positioniert werden. In diesem Beispiel wird ein <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/grid\">CSS-Raster<\/a> verwendet, bei dem der prim\u00e4re Inhalt etwa zwei Drittel der Breite einnimmt und der sekund\u00e4re Inhalt das restliche Drittel:<\/p>\n<pre><code class=\"language-css\">\/* larger device *\/\n@media (min-width: 500px) {\n  main {\n    display: grid;\n    grid-template-columns: 2fr 1fr;\n    gap: 2em;\n  }\n\n  article, aside {\n    width: auto;\n    padding: 0;\n  }\n}<\/code><\/pre>\n<p>Hier ist das Ergebnis auf gr\u00f6\u00dferen Bildschirmen:<\/p>\n<figure id=\"attachment_102260\" aria-describedby=\"caption-attachment-102260\" style=\"width: 602px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/site-horizontal.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-102260 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/site-horizontal.png\" alt=\"Beispiel-Screenshot mit Media Query-Unterst\u00fctzung\" width=\"602\" height=\"112\"><\/a><figcaption id=\"caption-attachment-102260\" class=\"wp-caption-text\">Beispiel-Screenshot mit Media Query-Unterst\u00fctzung<\/figcaption><\/figure>\n<h2>Media Query-Alternativen<\/h2>\n<p>Responsive Designs k\u00f6nnen in modernem CSS auch mit neueren Properties umgesetzt werden, die das Layout von sich aus anpassen, ohne die Viewport-Dimensionen zu pr\u00fcfen. Zu den Optionen geh\u00f6ren:<\/p>\n<ul>\n<li><code>calc<\/code>, <code>min-width<\/code>, <code>max-width<\/code>, <code>min-height<\/code>, <code>max-height<\/code>, und die neuere Eigenschaft <code>clamp<\/code> k\u00f6nnen alle Dimensionen definieren, die Elemente entsprechend bekannter Grenzen und des verf\u00fcgbaren Platzes vergr\u00f6\u00dfern.<\/li>\n<li>Die Viewport-Einheiten <code>vw<\/code>, <code>vh<\/code>, <code>vmin<\/code>, und <code>vmax<\/code> k\u00f6nnen die Gr\u00f6\u00dfe von Elementen anhand von Bildschirmabmessungen bestimmen.<\/li>\n<li>Text kann in CSS-Spalten dargestellt werden, die erscheinen oder verschwinden, wenn es der Platz erlaubt.<\/li>\n<li>Die Gr\u00f6\u00dfe von Elementen kann mit den Dimensionen <code>min-content<\/code>, <code>fit-content<\/code>, und <code>max-content<\/code> an die Gr\u00f6\u00dfe ihrer untergeordneten Elemente angepasst werden.<\/li>\n<li>CSS Flexbox kann Elemente umbrechen &#8211; oder <em>nicht<\/em> umbrechen &#8211; wenn sie den verf\u00fcgbaren Platz \u00fcberschreiten.<\/li>\n<li>CSS-Grid-Elemente k\u00f6nnen mit proportionalen Bruchteilen von Einheiten dimensioniert werden. Die CSS-Funktion repeat kann in Verbindung mit <code>minmax<\/code>, <code>auto-fit<\/code> und <code>auto-fill<\/code> verwendet werden, um den verf\u00fcgbaren Platz aufzuteilen.<\/li>\n<li>Die neuen und (derzeit) experimentellen <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/CSS_Container_Queries\">CSS-Container-Abfragen<\/a> k\u00f6nnen auf den teilweisen Platz reagieren, der einer Komponente innerhalb eines Layouts zur Verf\u00fcgung steht.<\/li>\n<\/ul>\n<p>Diese Optionen w\u00fcrden den Rahmen dieses Artikels sprengen, sind aber oft praktischer als grobe Media-Queries, die nur auf die Bildschirmgr\u00f6\u00dfe reagieren k\u00f6nnen. Wenn du ein Layout ohne Media-Queries erstellen kannst, wird es wahrscheinlich weniger Code ben\u00f6tigen, effizienter sein und weniger Wartung erfordern.<\/p>\n<p>Dennoch gibt es Situationen, in denen Media Queries die einzige brauchbare Layout-Option sind. Sie sind unverzichtbar, wenn du andere Bildschirmfaktoren wie Seitenverh\u00e4ltnisse, Ger\u00e4teausrichtung, Farbtiefe, Zeigergenauigkeit oder Benutzereinstellungen wie reduzierte Animationen und Hell\/Dunkel-Modus ber\u00fccksichtigen musst.<\/p>\n<h2>Musst du Media Queries in JavaScript verwenden?<\/h2>\n<p>Bis jetzt haben wir haupts\u00e4chlich \u00fcber CSS gesprochen. Das liegt daran, dass die meisten Layout-Probleme allein mit CSS gel\u00f6st werden k\u00f6nnen &#8211; und <em>sollten<\/em>.<\/p>\n<p>Es gibt jedoch Situationen, in denen es praktisch ist, eine JavaScript-Medienabfrage anstelle von CSS zu verwenden, z. B. wenn:<\/p>\n<ul>\n<li>Eine Komponente, z. B. ein Men\u00fc, hat auf kleinen und gro\u00dfen Bildschirmen unterschiedliche Funktionen.<\/li>\n<li>Der Wechsel zwischen Hoch- und Querformat wirkt sich auf die Funktionalit\u00e4t einer Web-App aus.<\/li>\n<li>Ein touchbasiertes Spiel muss das <code>&lt;canvas&gt;<\/code>-Layout \u00e4ndern oder die Steuerungsschaltfl\u00e4chen anpassen.<\/li>\n<li>Eine Web-App richtet sich nach den Vorlieben der Nutzer\/innen, z. B. Dunkel-\/Hell-Modus, reduzierte Animationen, Grobheit der Ber\u00fchrung usw.<\/li>\n<\/ul>\n<p>Die folgenden Abschnitte zeigen drei Methoden, die Media-Queries &#8211; oder Media-Query-\u00e4hnliche Optionen &#8211; in <a href=\"https:\/\/kinsta.com\/de\/blog\/vue-js\/\">JavaScript<\/a> verwenden. Alle Beispiele geben einen Status-String zur\u00fcck:<\/p>\n<ul>\n<li><strong>small view<\/strong> = ein Bildschirm mit einer Breite unter 400 Pixeln;<\/li>\n<li><strong>medium view<\/strong> = ein Bildschirm mit einer Breite zwischen 400 und 799 Pixeln; und<\/li>\n<li><strong>large view<\/strong> = ein Bildschirm mit einer Breite von 800 Pixeln oder mehr.<\/li>\n<\/ul>\n<h2>Option 1: \u00dcberwache die Viewport-Dimensionen<\/h2>\n<p>Das war die einzige M\u00f6glichkeit in den dunklen Tagen, bevor Media Queries implementiert wurden. JavaScript h\u00f6rte auf &#8222;Resize&#8220;-Ereignisse des Browsers, analysierte die Abmessungen des Ansichtsfensters mit <code>window.innerWidth<\/code> und <code>window.innerHeight<\/code> (oder <code>document.body.clientWidth<\/code> und <code>document.body.clientHeight<\/code> in alten IEs) und reagierte entsprechend.<\/p>\n<p>Dieser Code gibt den berechneten <strong>small<\/strong>, <strong>medium<\/strong> oder <strong>large<\/strong> String auf der Konsole aus:<\/p>\n<pre><code class=\"language-js\">const\n  screen = {\n    small: 0,\n    medium: 400,\n    large: 800\n  };\n\n\/\/ observe window resize\nwindow.addEventListener('resize', resizeHandler);\n\n\/\/ initial call\nresizeHandler();\n\n\/\/ calculate size\nfunction resizeHandler() {\n\n  \/\/ get window width\n  const iw = window.innerWidth;\n \n  \/\/ determine named size\n  let size = null;\n  for (let s in screen) {\n    if (iw &gt;= screen[s]) size = s;\n  }\n\n  console.log(size);\n}<\/code><\/pre>\n<p>Du kannst dir hier eine <a href=\"https:\/\/codepen.io\/craigbuckler\/full\/mdmBymR\">funktionierende Demonstration<\/a> ansehen. (Wenn du einen Desktop-Browser verwendest, \u00f6ffne diesen Link in einem neuen Fenster, damit du die Gr\u00f6\u00dfe leichter \u00e4ndern kannst. Mobile Nutzer k\u00f6nnen das Ger\u00e4t drehen).<\/p>\n<p>Das obige Beispiel pr\u00fcft die Gr\u00f6\u00dfe des Viewports, wenn die Gr\u00f6\u00dfe des Browsers ge\u00e4ndert wird, stellt fest, ob sie klein, mittel oder gro\u00df ist, und legt dies als Klasse f\u00fcr das body-Element fest, wodurch die Hintergrundfarbe ge\u00e4ndert wird.<\/p>\n<p>Die Vorteile dieser Methode sind:<\/p>\n<ul>\n<li>Sie funktioniert in jedem <a href=\"https:\/\/kinsta.com\/de\/browser-marktanteil\/\">Browser<\/a>, der JavaScript ausf\u00fchren kann &#8211; sogar in alten Anwendungen.<\/li>\n<li>Du erf\u00e4hrst die genauen Ma\u00dfe und kannst entsprechend reagieren.<\/li>\n<\/ul>\n<p>Die Nachteile:<\/p>\n<ul>\n<li>Es ist eine alte Technik, die viel Code erfordert.<\/li>\n<li>Ist sie zu genau? Musst du wirklich wissen, wann die Breite 966px und wann 967px betr\u00e4gt?<\/li>\n<li>M\u00f6glicherweise musst du die Abmessungen manuell mit einer entsprechenden CSS-Medienabfrage abgleichen.<\/li>\n<li>Nutzer k\u00f6nnen die Gr\u00f6\u00dfe des Browsers schnell \u00e4ndern, so dass die Handler-Funktion jedes Mal neu ausgef\u00fchrt werden muss. Dadurch k\u00f6nnen \u00e4ltere und langsamere Browser \u00fcberlastet werden, indem das Ereignis gedrosselt wird. Es kann nur einmal alle 500 Millisekunden ausgel\u00f6st werden.<\/li>\n<\/ul>\n<p>Zusammenfassend l\u00e4sst sich sagen, dass du die Viewport-Abmessungen nicht \u00fcberwachen solltest, es sei denn, du hast sehr spezifische und komplexe Anforderungen an die Gr\u00f6\u00dfe.<\/p>\n<h2 id=\"option2\">Option 2: Definiere und \u00fcberwache eine benutzerdefinierte CSS Property (Variable)<\/h2>\n<p>Dies ist eine etwas ungew\u00f6hnliche Technik, die den Wert einer benutzerdefinierten Property-Zeichenkette in CSS \u00e4ndert, wenn eine Medienabfrage ausgel\u00f6st wird. Benutzerdefinierte Properties werden <a href=\"https:\/\/kinsta.com\/de\/blog\/sechs-sichersten-browser\/\">von allen modernen Browsern<\/a> (au\u00dfer dem IE) unterst\u00fctzt.<\/p>\n<p>Im folgenden Beispiel wird die benutzerdefinierte Property <code>--screen<\/code> in einem @media-Codeblock auf &#8222;small&#8220;, &#8222;medium&#8220; oder &#8222;large&#8220; gesetzt:<\/p>\n<pre><code class=\"language-css\">body {\n  --screen: \"small\";\n  background-color: #cff;\n  text-align: center;\n}\n\n@media (min-width: 400px) {\n \n  body {\n    --screen: \"medium\";\n    background-color: #fcf;\n  }\n \n}\n\n@media (min-width: 800px) {\n \n  body {\n    --screen: \"large\";\n    background-color: #ffc;\n  }\n \n}<\/code><\/pre>\n<p>Der Wert kann in CSS allein mit einem Pseudo-Element ausgegeben werden (beachte aber, dass er in einfachen oder doppelten Anf\u00fchrungszeichen stehen muss):<\/p>\n<pre><code class=\"language-css\">p::before {\n  content: var(--screen);\n}<\/code><\/pre>\n<p>Du kannst den Wert der benutzerdefinierten Property mit JavaScript abrufen:<\/p>\n<pre><code class=\"language-js\">const screen = getComputedStyle(window.body)\n                 .getPropertyValue('--screen');<\/code><\/pre>\n<p>Das ist allerdings nicht ganz richtig, denn der zur\u00fcckgegebene Wert enth\u00e4lt alle Leer- und Anf\u00fchrungszeichen, die nach dem Doppelpunkt im CSS definiert sind. Die Zeichenkette wird &#8222;large&#8220; sein, also ist ein wenig Aufr\u00e4umen n\u00f6tig:<\/p>\n<pre><code class=\"language-js\">\/\/ returns small, medium, or large in a string\nconst screen = getComputedStyle(window.body)\n                 .getPropertyValue('--screen')\n                 .replace(\/\\W\/g, '');<\/code><\/pre>\n<p>Du kannst dir hier <a href=\"https:\/\/codepen.io\/craigbuckler\/full\/BaRwNzG\">eine funktionierende Demonstration<\/a> ansehen. (Wenn du einen Desktop-Browser verwendest, \u00f6ffne diesen Link in einem neuen Fenster, damit du die Gr\u00f6\u00dfe leichter \u00e4ndern kannst. Mobile Nutzer k\u00f6nnen das Ger\u00e4t drehen.)<\/p>\n<p>Das Beispiel pr\u00fcft den CSS-Wert alle zwei Sekunden. Es erfordert ein wenig JavaScript-Code, aber er ist notwendig, um nach \u00c4nderungen zu suchen &#8211; du kannst nicht automatisch erkennen, dass sich der Wert der benutzerdefinierten Property mit CSS ge\u00e4ndert hat.<\/p>\n<p>Es ist auch nicht m\u00f6glich, den Wert in ein Pseudo-Element zu schreiben und die \u00c4nderung mit einem <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/MutationObserver\">DOM Mutation Observer<\/a> zu erkennen. Pseudo-Elemente sind kein &#8222;echter&#8220; Teil des DOMs!<\/p>\n<p>Die Vorteile:<\/p>\n<ul>\n<li>Es ist eine einfache Technik, die haupts\u00e4chlich CSS verwendet und mit echten Media Queries \u00fcbereinstimmt.<\/li>\n<li>Alle anderen CSS Properties k\u00f6nnen gleichzeitig ge\u00e4ndert werden.<\/li>\n<li>Du musst keine JavaScript-Medienabfrage-Strings duplizieren oder parsen.<\/li>\n<\/ul>\n<p>Der gr\u00f6\u00dfte Nachteil ist, dass du nicht automatisch auf eine \u00c4nderung der Viewport-Abmessungen des Browsers reagieren kannst. Wenn der Nutzer sein Handy vom Hoch- ins Querformat dreht, erf\u00e4hrt das JavaScript das nicht. Du kannst zwar h\u00e4ufig nach \u00c4nderungen fragen, aber das ist ineffizient und f\u00fchrt zu der Zeitverz\u00f6gerung, die du in unserer Demonstration siehst.<\/p>\n<p>Die \u00dcberwachung der benutzerdefinierten CSS Properties ist eine neue Technik, die aber nur dann sinnvoll ist, wenn:<\/p>\n<ol>\n<li>Das Layout kann zum Zeitpunkt des ersten Renderns einer Seite festgelegt werden. Ein Kiosk oder ein <a href=\"https:\/\/kinsta.com\/de\/blog\/stripe-vs-square\/\">Point-of-Sale-Terminal <\/a>ist eine M\u00f6glichkeit, aber diese haben wahrscheinlich feste Aufl\u00f6sungen und ein einziges Layout, so dass JavaScript-Media-Queries irrelevant werden.<\/li>\n<li>Auf der Seite oder in der App laufen bereits h\u00e4ufig zeitbasierte Funktionen, wie z. B. eine Spielanimation. Die benutzerdefinierte Property k\u00f6nnte gleichzeitig \u00fcberpr\u00fcft werden, um festzustellen, ob Layout\u00e4nderungen erforderlich sind.<\/li>\n<\/ol>\n<h2>Option 3: Die matchMedia-API verwenden<\/h2>\n<p>Die <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Window\/matchMedia\">matchMedia API<\/a> ist etwas ungew\u00f6hnlich, aber sie erm\u00f6glicht es dir, eine JavaScript-Medienabfrage zu implementieren. Sie wird von den <a href=\"https:\/\/caniuse.com\/matchmedia\">meisten Browsern ab IE10 aufw\u00e4rts unterst\u00fctzt<\/a>. Der Konstruktor gibt ein <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/MediaQueryList\">MediaQueryList-Objekt<\/a> zur\u00fcck, das eine Property matches hat, die f\u00fcr die jeweilige Medienabfrage true oder false ausgibt.<\/p>\n<p>Der folgende Code gibt true aus, wenn die Breite des Browserfensters 800px oder mehr betr\u00e4gt:<\/p>\n<pre><code class=\"language-js\">const mqLarge  = window.matchMedia( '(min-width: 800px)' );\nconsole.log( mqLarge.matches );<\/code><\/pre>\n<p>Ein &#8222;Change&#8220;-Ereignis kann auf das MediaQueryList-Objekt angewendet werden. Es wird jedes Mal ausgel\u00f6st, wenn sich der Status der Property &#8222;matches&#8220; \u00e4ndert: Sie wird true (\u00fcber 800px), nachdem sie vorher false (unter 800px) war, oder umgekehrt.<\/p>\n<p>Der empfangenden Handler-Funktion wird das MediaQueryList-Objekt als erster Parameter \u00fcbergeben:<\/p>\n<pre><code class=\"language-js\">const mqLarge  = window.matchMedia( '(min-width: 800px)' );\nmqLarge.addEventListener('change', mqHandler);\n\n\/\/ media query handler function\nfunction mqHandler(e) {\n \n  console.log(\n    e.matches ? 'large' : 'not large'\n  );\n \n}<\/code><\/pre>\n<p>Der Handler wird nur ausgef\u00fchrt, wenn sich die Property matches \u00e4ndert. Er wird nicht ausgef\u00fchrt, wenn die Seite zum ersten Mal geladen wird. Du kannst die Funktion also direkt aufrufen, um den Ausgangszustand zu bestimmen:<\/p>\n<pre><code class=\"language-js\">\/\/ initial state\nmqHandler(mqLarge);<\/code><\/pre>\n<p>Die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-http-api-teil-2\/\">API<\/a> funktioniert gut, wenn du dich zwischen zwei verschiedenen Zust\u00e4nden bewegst. Um drei oder mehr Zust\u00e4nde zu analysieren, z. B. <strong>small<\/strong>, <strong>medium<\/strong> und <strong>large<\/strong>, ist mehr Code erforderlich.<\/p>\n<p>Beginne mit der Definition eines Bildschirmzustandsobjekts mit zugeh\u00f6rigen MatchMedia-Objekten:<\/p>\n<pre><code class=\"language-js\">const\n  screen = {\n    small : null,\n    medium: window.matchMedia( '(min-width: 400px)' ),\n    large : window.matchMedia( '(min-width: 800px)' )\n  };<\/code><\/pre>\n<p>Es ist nicht notwendig, ein MatchMedia-Objekt f\u00fcr den <strong>small<\/strong> Zustand zu definieren, da der medium-Event-Handler beim Wechsel zwischen <strong>small<\/strong> und <strong>medium<\/strong> ausgel\u00f6st wird.<\/p>\n<p>F\u00fcr die <strong>medium<\/strong> und <strong>large<\/strong> Ereignisse k\u00f6nnen dann Ereignis-Listener gesetzt werden. Diese rufen dieselbe Handler-Funktion mqHandler() auf:<\/p>\n<pre><code class=\"language-js\">\/\/ media query change events\nfor (let [scr, mq] of Object.entries(screen)) {\n  if (mq) mq.addEventListener('change', mqHandler);\n}<\/code><\/pre>\n<p>Die Handler-Funktion muss alle MediaQueryList-Objekte \u00fcberpr\u00fcfen, um festzustellen, ob <strong>small<\/strong>, <strong>medium<\/strong> oder <strong>large<\/strong> gerade aktiv ist. Die Abgleiche m\u00fcssen in der Reihenfolge der Gr\u00f6\u00dfe durchgef\u00fchrt werden, da eine Breite von 999px sowohl auf <strong>medium<\/strong> als auch auf <strong>large<\/strong> zutreffen w\u00fcrde &#8211; nur der gr\u00f6\u00dfte sollte &#8222;gewinnen&#8220;:<\/p>\n<pre><code class=\"language-js\">\/\/ media query handler function\nfunction mqHandler() {\n \n  let size = null;\n  for (let [scr, mq] of Object.entries(screen)) {\n    if (!mq || mq.matches) size = scr;\n  }\n \n  console.log(size);\n \n}<\/code><\/pre>\n<p>Du kannst dir hier eine <a href=\"https:\/\/codepen.io\/craigbuckler\/full\/VwbMroZ\">funktionierende Demonstration<\/a> ansehen. (Wenn du einen Desktop-Browser verwendest, \u00f6ffne diesen Link in einem neuen Fenster, damit du die Gr\u00f6\u00dfe leichter \u00e4ndern kannst. Mobile Nutzer k\u00f6nnen das Ger\u00e4t drehen.)<\/p>\n<p>Die Anwendungsbeispiele sind:<\/p>\n<ol>\n<li>Medienabfragen in CSS zum Festlegen und Anzeigen einer benutzerdefinierten Property (wie in <strong>Option 2<\/strong> oben gezeigt).<\/li>\n<li>Identische Media-Queries in matchMedia-Objekten, um Dimensions\u00e4nderungen in JavaScript zu \u00fcberwachen. Die JavaScript-Ausgabe \u00e4ndert sich dann genau zur gleichen Zeit.<\/li>\n<\/ol>\n<p>Die wichtigsten Vorteile der matchMedia-API sind:<\/p>\n<ul>\n<li>Sie ist ereignisgesteuert und verarbeitet Medienabfrage\u00e4nderungen effizient.<\/li>\n<li>Sie verwendet identische Media Query Strings wie CSS.<\/li>\n<\/ul>\n<p>Die Nachteile:<\/p>\n<ul>\n<li>Die Verarbeitung von zwei oder mehr Medienabfragen erfordert mehr \u00dcberlegungen und Codelogik.<\/li>\n<li>Wahrscheinlich musst du Media Query Strings sowohl im CSS- als auch im JavaScript-Code duplizieren. Das kann zu Fehlern f\u00fchren, wenn du sie nicht synchron h\u00e4ltst.<\/li>\n<\/ul>\n<p>Um falsche Medienabfragen zu vermeiden, k\u00f6nntest du Design-Tokens in deinem Build-System verwenden. Media Query Strings werden in einer JSON-Datei (oder einer \u00e4hnlichen Datei) definiert und die Werte werden bei der Erstellung in den CSS- und JavaScript-Code eingef\u00fcgt.<\/p>\n<p>Zusammenfassend l\u00e4sst sich sagen, dass die matchMedia-API wahrscheinlich der effizienteste und praktischste Weg ist, eine JavaScript-Medienabfrage zu implementieren. Sie hat zwar einige T\u00fccken, ist aber in den meisten F\u00e4llen die beste Option.<\/p>\n\n<h2>Zusammenfassung<\/h2>\n<p>Intrinsische CSS-Gr\u00f6\u00dfenoptionen werden immer praktikabler, aber Media Queries bleiben f\u00fcr die meisten Seiten die Grundlage des <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-ein-wordpress-theme\/\">responsiven Webdesigns<\/a>. Sie werden immer notwendig sein, um komplexere Layouts und Nutzerpr\u00e4ferenzen wie den Hell\/Dunkel-Modus zu behandeln.<\/p>\n<p>Versuche, Media-Queries m\u00f6glichst auf CSS zu beschr\u00e4nken. Wenn du keine andere Wahl hast, als dich in die Welt von JavaScript zu begeben, bietet die matchMedia-API zus\u00e4tzliche Kontrolle f\u00fcr JavaScript-Medienabfragekomponenten, die zus\u00e4tzliche dimensionsbasierte Funktionen ben\u00f6tigen.<\/p>\n<p>Hast du weitere Tipps f\u00fcr die Implementierung einer JavaScript-Medienabfrage? Teile sie in den Kommentaren mit!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die meisten modernen Webseiten verwenden responsive Webdesign-Techniken, um sicherzustellen, dass sie gut aussehen, lesbar sind und auf Ger\u00e4ten mit jeder Bildschirmgr\u00f6\u00dfe nutzbar bleiben, d.h. auf Handys, &#8230;<\/p>\n","protected":false},"author":188,"featured_media":43534,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[465,445],"topic":[984,952],"class_list":["post-43524","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-javascript-frameworks","topic-benutzererfahrung","topic-javascript-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Eine ausf\u00fchrliche Anleitung zur Verwendung von Media Queries in JavaScript<\/title>\n<meta name=\"description\" content=\"Media-Queries werden normalerweise in CSS definiert, um das Layout einer Seite responsive zu gestalten. Media Queries k\u00f6nnen auch in JavaScript verwendet werden.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Eine ausf\u00fchrliche Anleitung zur Verwendung von Media Queries in JavaScript\" \/>\n<meta property=\"og:description\" content=\"Media-Queries werden normalerweise in CSS definiert, um das Layout einer Seite responsive zu gestalten. Media Queries k\u00f6nnen auch in JavaScript verwendet werden.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-15T07:49:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-27T11:13:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/javascript-media-query.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Craig Buckler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Media-Queries werden normalerweise in CSS definiert, um das Layout einer Seite responsive zu gestalten. Media Queries k\u00f6nnen auch in JavaScript verwendet werden.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/javascript-media-query.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@craigbuckler\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Craig Buckler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"13\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/\"},\"author\":{\"name\":\"Craig Buckler\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/715d986404b06691ab3014e06596908e\"},\"headline\":\"Eine ausf\u00fchrliche Anleitung zur Verwendung von Media Queries in JavaScript\",\"datePublished\":\"2021-09-15T07:49:55+00:00\",\"dateModified\":\"2023-07-27T11:13:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/\"},\"wordCount\":2772,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/javascript-media-query.jpeg\",\"keywords\":[\"JavaScript\",\"JavaScript Frameworks\"],\"articleSection\":[\"Webentwicklung\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/\",\"name\":\"Eine ausf\u00fchrliche Anleitung zur Verwendung von Media Queries in JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/javascript-media-query.jpeg\",\"datePublished\":\"2021-09-15T07:49:55+00:00\",\"dateModified\":\"2023-07-27T11:13:32+00:00\",\"description\":\"Media-Queries werden normalerweise in CSS definiert, um das Layout einer Seite responsive zu gestalten. Media Queries k\u00f6nnen auch in JavaScript verwendet werden.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/javascript-media-query.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/javascript-media-query.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Eine ausf\u00fchrliche Anleitung zur Verwendung von Media Queries in JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Benutzererfahrung\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/benutzererfahrung\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Eine ausf\u00fchrliche Anleitung zur Verwendung von Media Queries in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/715d986404b06691ab3014e06596908e\",\"name\":\"Craig Buckler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g\",\"caption\":\"Craig Buckler\"},\"description\":\"Freelance UK web developer, writer, and speaker. Has been around a long time and rants about standards and performance.\",\"sameAs\":[\"https:\/\/craigbuckler.com\/\",\"https:\/\/www.linkedin.com\/in\/craigbuckler\",\"https:\/\/x.com\/craigbuckler\",\"https:\/\/www.youtube.com\/channel\/UCQwdl5oBTWGhifS6bRGADMQ\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/craigbuckler\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Eine ausf\u00fchrliche Anleitung zur Verwendung von Media Queries in JavaScript","description":"Media-Queries werden normalerweise in CSS definiert, um das Layout einer Seite responsive zu gestalten. Media Queries k\u00f6nnen auch in JavaScript verwendet werden.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/","og_locale":"de_DE","og_type":"article","og_title":"Eine ausf\u00fchrliche Anleitung zur Verwendung von Media Queries in JavaScript","og_description":"Media-Queries werden normalerweise in CSS definiert, um das Layout einer Seite responsive zu gestalten. Media Queries k\u00f6nnen auch in JavaScript verwendet werden.","og_url":"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2021-09-15T07:49:55+00:00","article_modified_time":"2023-07-27T11:13:32+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/javascript-media-query.jpeg","type":"image\/jpeg"}],"author":"Craig Buckler","twitter_card":"summary_large_image","twitter_description":"Media-Queries werden normalerweise in CSS definiert, um das Layout einer Seite responsive zu gestalten. Media Queries k\u00f6nnen auch in JavaScript verwendet werden.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/javascript-media-query.jpeg","twitter_creator":"@craigbuckler","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Craig Buckler","Gesch\u00e4tzte Lesezeit":"13\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/"},"author":{"name":"Craig Buckler","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/715d986404b06691ab3014e06596908e"},"headline":"Eine ausf\u00fchrliche Anleitung zur Verwendung von Media Queries in JavaScript","datePublished":"2021-09-15T07:49:55+00:00","dateModified":"2023-07-27T11:13:32+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/"},"wordCount":2772,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/javascript-media-query.jpeg","keywords":["JavaScript","JavaScript Frameworks"],"articleSection":["Webentwicklung"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/","url":"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/","name":"Eine ausf\u00fchrliche Anleitung zur Verwendung von Media Queries in JavaScript","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/javascript-media-query.jpeg","datePublished":"2021-09-15T07:49:55+00:00","dateModified":"2023-07-27T11:13:32+00:00","description":"Media-Queries werden normalerweise in CSS definiert, um das Layout einer Seite responsive zu gestalten. Media Queries k\u00f6nnen auch in JavaScript verwendet werden.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/javascript-media-query.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/javascript-media-query.jpeg","width":1460,"height":730,"caption":"Eine ausf\u00fchrliche Anleitung zur Verwendung von Media Queries in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/javascript-media-query\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Benutzererfahrung","item":"https:\/\/kinsta.com\/de\/thema\/benutzererfahrung\/"},{"@type":"ListItem","position":3,"name":"Eine ausf\u00fchrliche Anleitung zur Verwendung von Media Queries in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/715d986404b06691ab3014e06596908e","name":"Craig Buckler","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g","caption":"Craig Buckler"},"description":"Freelance UK web developer, writer, and speaker. Has been around a long time and rants about standards and performance.","sameAs":["https:\/\/craigbuckler.com\/","https:\/\/www.linkedin.com\/in\/craigbuckler","https:\/\/x.com\/craigbuckler","https:\/\/www.youtube.com\/channel\/UCQwdl5oBTWGhifS6bRGADMQ"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/craigbuckler\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/43524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/188"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=43524"}],"version-history":[{"count":3,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/43524\/revisions"}],"predecessor-version":[{"id":43525,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/43524\/revisions\/43525"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43524\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43524\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43524\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43524\/translations\/de"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43524\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43524\/translations\/it"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43524\/translations\/nl"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43524\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/43534"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=43524"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=43524"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=43524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}