{"id":40140,"date":"2021-09-29T14:20:23","date_gmt":"2021-09-29T12:20:23","guid":{"rendered":"https:\/\/kinsta.com\/?p=102257"},"modified":"2023-05-23T09:53:24","modified_gmt":"2023-05-23T07:53:24","slug":"javascript-media-queries","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/","title":{"rendered":"Uitgebreide uitleg over het gebruik van media queries in JavaScript"},"content":{"rendered":"<p>De meeste moderne websites gebruiken inmiddels technieken voor <a href=\"https:\/\/kinsta.com\/nl\/blog\/responsive-webdesign\/\">responsive webdesign<\/a>, zodat websites er mooi, leesbaar en functioneel uitzien, onafhankelijk van de schermgrootte van de bezoeker, of die nu een beamer, laptop, smartphone, computer of televisie gebruikt.<\/p>\n<p>Websites die deze technieken toepassen hebben \u00e9\u00e9n template die de layout van de website kan aanpassen aan de afmetingen van het scherm van elke bezoeker:<\/p>\n<ul>\n<li>Kleinere schermen gebruiken meestal een langer ontwerp met \u00e9\u00e9n kolom, waarbij je elementen in de gebruikersinterface, zoals het <a href=\"https:\/\/kinsta.com\/nl\/blog\/plugins-wordpress-menu\/\">menu<\/a>, kan activeren door op een icoon te klikken.<\/li>\n<li>Grotere schermen tonen meer informatie in \u00e9\u00e9n keer, vaak met horizontale menu-balken. UI elementen zoals menu-items zijn dan altijd direct zichtbaar.<\/li>\n<\/ul>\n<p>Een belangrijk onderdeel van responsief webdesign is de implementatie van een <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-css\/\">CSS<\/a> of Javascript media query om de grootte van het bezoekende apparaat te detecteren, zodat automatisch het juiste ontwerp getoond kan worden. In dit artikel leggen we uit waarom deze queries belangrijk zijn en hoe je ze kan gebruiken, maar daarvoor moeten we het eerst hebben over responsive webdesign in het algemeen.<\/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>Waarom is responsive webdesign belangrijk?<\/h2>\n<p>Het is onmogelijk om \u00e9\u00e9n <a href=\"https:\/\/kinsta.com\/nl\/blog\/responsive-webdesign\/\">vaste layout voor een pagina<\/a> te bieden en dan te verwachten dat dit overal en voor iedereen werkt.<\/p>\n<p>Toen mobiele telefoons voor het eerst toegang begonnen te krijgen aan het begin van het millennium, maakten websitebeheerders vaak twee of drie aparte templates die gericht waren op mobiele bezoekers. Maar naarmate mobiele apparaten exponentieel groeiden in populariteit, werd dit een onpraktische oplossing.<\/p>\n<p>Vandaag de dag zijn er ontelbaar veel schermgroottes, van minuscule displays van smartwatches, tot enorme 8K monitors. Zelfs als je je beperkt tot mobiele telefoons, kunnen veel nieuwe apparaten een hogere resolutie hebben dan menig eenvoudige laptop.<\/p>\n<p>Mobiel browsergebruik is ook inmiddels <a href=\"https:\/\/gs.statcounter.com\/platform-market-share\/desktop-mobile-tablet\">verder gegroeid dan desktops<\/a>. Tenzij je website een specifieke doelgroep heeft die het anders doet, mag je verwachten dat de meeste mensen je website bezoeken op een smartphone. Apparaten met kleinere schermen zijn dus belangrijk, en het ontwerp moet daar dan ook op gericht zijn, zelfs al gebruiken de meeste ontwerpers, developers en hun klanten nog altijd vaker een computer voor hun werk.<\/p>\n<p>Google heeft al ingezien hoe belangrijk mobiele apparaten zijn. <a href=\"https:\/\/kinsta.com\/nl\/blog\/google-mobile-first-index\/\">Websites staan hoger in de zoekresultaten van Google<\/a> als ze goed te gebruiken zijn op een smartphone. Goede content blijft natuurlijk ook belangrijk, maar een website die traag laadt op een mobiel en zich niet aanpast aan de schermafmetingen van de gebruikers, kan je bedrijf echt geld kosten.<\/p>\n<p>Als laatste is ook toegankelijkheid erg belangrijk. Een website die voor iedereen te gebruiken is, wat voor apparaat ze ook gebruiken, zal per definitie een groter bereik hebben. Toegankelijkheid is in veel landen ook wettelijk vereist, maar zelfs als dat voor jou niet geldt, moet je bedenken dat meer bezoekers altijd meer conversies en winst biedt.<\/p>\n\n<h2>Hoe werkt responsive webdesign?<\/h2>\n<p>De basis van responsive webdesign ligt in <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/Media_Queries\">media queries<\/a>: een CSS technologie die een bepaalde stijl kan toepassen op basis van bepaalde indicatoren, zoals het soort output (een computerscherm, printen, of zelfs spraak), schermafmetingen, verhouding van de display, ori\u00ebntatie van het apparaat, kleurdiepte en nauwkeurigheid van de aanwijzer. Media queries kijken ook naar de voorkeuren van de gebruiker, zoals minder animaties, donkere of lichte modus, en verhoogd contrast.<\/p>\n<p>De voorbeelden voor media queries laten alleen maar zien wat je kan met de breedte van het scherm, maar websites kunnen nog veel meer doen. Kijk maar eens naar de <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries\">volledige set met mogelijkheden op MDN<\/a>.<\/p>\n<p><a href=\"https:\/\/caniuse.com\/css-mediaqueries\">De ondersteuning voor media queries is uitstekend<\/a>, en bestaat in de meeste browsers al meer dan tien jaar. Alleen browsers ouder dan Internet Explorer 8 bieden hier geen ondersteuning voor. Zij negeren de stijlen die media queries aanbieden, maar dat kan soms ook een voordeel zijn (lees maar eens verderop in de <strong>Best practices<\/strong>).<\/p>\n<p>Er zijn drie gebruikelijke manieren om stijlen toe te passen op basis van media queries. De eerste optie laadt specifieke stylesheets in <a href=\"https:\/\/kinsta.com\/nl\/blog\/html-vs-html5\/\">HTML code<\/a>. De volgende tag laadt bijvoorbeeld de <strong>wide.css<\/strong> stylesheet wanneer een apparaat een breedte heeft boven de 800 pixels:<\/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>Als tweede optie kunnen stylesheets voorwaardelijk geladen worden in CSS bestanden via een <code>@import<\/code> regel:<\/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>Let op dat <code>@import<\/code> eigenlijk gemeden zou moeten worden, omdat elk ge\u00efmporteerde CSS bestand de weergave blokkeert. HTML <code>&lt;link&gt;<\/code> tags worden parallel gedownload, terwijl <code>@import<\/code> bestanden achter elkaar downloadt.<\/p>\n<\/aside>\n\n<p>Over het algemeen zal je media queries toepassen binnen stylesheets via een @media CSS at-rule block die een bepaalde stijl aanpast. Bijvoorbeeld:<\/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>Developers kunnen een regel voor media queries toepassen die nodig zijn om de layout van een bepaalde site aan te passen.<\/p>\n<h2>Best practices voor media queries<\/h2>\n<p>Wanneer media queries voor het eerst werden ingevoerd, kozen veel websites voor een set vaste layouts. Dit is conceptueel namelijk makkelijker te ontwerpen en te programmeren, omdat je in feite gewoon een beperkt aantal templates voor pagina&#8217;s maakt. Bijvoorbeeld:<\/p>\n<ol>\n<li>Schermen met een breedte onder de 600px gebruiken een 400px brede layout, met name voor mobiel gebruik.<\/li>\n<li>Schermen met een breedte tussen de 600px en 999px gebruiken een 600px brede layout, voor tablets en dergelijke.<\/li>\n<li>Schermen boven de 1000px breed gebruiken een 1000px brede layout voor computers.<\/li>\n<\/ol>\n<p>Deze techniek is niet optimaal. De resultaten op de kleinste of juist grote schermen zijn niet mooi, en als de algemene maten van apparaten en bijbehorende schermen veranderen, moet de CSS steeds bijgehouden worden.<\/p>\n<p>Een betere keuze is om een <a href=\"https:\/\/kinsta.com\/nl\/blog\/google-mobile-first-index\/\">mobile-first<\/a> flexibel ontwerp te gebruiken met breekpunten, waardoor de layout op een bepaalde grootte aangepast wordt. In feite gebruikt de standaard layout de eenvoudigste stijlen voor kleine schermen, die elementen in lineaire verticale blokken plaatsen.<\/p>\n<p>Zie bijvoorbeeld een <code>&lt;article&gt;<\/code> en <code>&lt;aside&gt;<\/code> binnen een <code>&lt;main&gt;<\/code> container:<\/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>Dit zijn de resultaten daarvan in alle browsers, zelfs in de oudste browsers zonder ondersteuning voor media queries:<\/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=\"Voorbeeld zonder ondersteuning voor media queries\" width=\"626\" height=\"200\"><\/a><figcaption id=\"caption-attachment-102292\" class=\"wp-caption-text\">Voorbeeld zonder ondersteuning voor media queries<\/figcaption><\/figure>\n<p>Wanneer media queries wel ondersteund worden en het scherm zit boven een bepaalde breedte, bijvoorbeeld 500px, dan worden de elementen <code>&lt;article&gt;<\/code> en <code>&lt;aside&gt;<\/code> horizontaal gepositioneerd. Dit voorbeeld gebruikt een <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/grid\">CSS grid<\/a>, waar de primaire content ongeveer twee derde van de breedte gebruikt, en de secundaire content de overige een derde:<\/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>Dit is dan het resultaat op grotere schermen:<\/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=\"Voorbeeld met ondersteuning voor media queries.\" width=\"602\" height=\"112\"><\/a><figcaption id=\"caption-attachment-102260\" class=\"wp-caption-text\">Voorbeeld met ondersteuning voor media queries.<\/figcaption><\/figure>\n<h2>Alternatieven voor media queries<\/h2>\n<p>Responsive ontwerpen kunnen ook ge\u00efmplementeerd worden in moderne CSS, met nieuwere eigenschappen die per definitie de layout aanpassen, zonder de afmetingen van de viewport mee te nemen. Opties zijn bijvoorbeeld:<\/p>\n<ul>\n<li><code>calc<\/code>,\u00a0<code>min-width<\/code>,\u00a0<code>max-width<\/code>,\u00a0<code>min-height<\/code>,\u00a0<code>max-height<\/code>, en de nieuwere <code>clamp<\/code> eigenschap kunnen allemaal afmetingen defini\u00ebren waardoor elementen in grootte afgestemd worden om de beschikbare ruimte en beperkingen.<\/li>\n<li>De viewport units\u00a0<code>vw<\/code>,\u00a0<code>vh<\/code>,\u00a0<code>vmin<\/code>, en <code>vmax<\/code> kunnen de grootte van elementen aanpassen op basis van schermverhoudingen.<\/li>\n<li>Tekst kan in CSS kolommen gezet worden, die getoond of verborgen worden op basis van de beschikbare ruimte.<\/li>\n<li>Elementen kunnen in grootte vari\u00ebren volgens de afmetingen van hun child elementen, via <code>min-content<\/code>,\u00a0<code>fit-content<\/code>, en \u00a0<code>max-content<\/code><\/li>\n<li>CSS flexbox kan elementen wrappen, of juist <em>niet<\/em>, wanneer ze de beschikbare ruimte overschrijden.<\/li>\n<li>CSS grid elementen kunnen aangepast worden met proportionele <code>fr<\/code> De repeat CSS functie kan samen met\u00a0<code>minmax<\/code>,\u00a0<code>auto-fit<\/code>, en <code>auto-fill<\/code> gebruikt worden om de beschikbare ruimte te verdelen.<\/li>\n<li>De nieuwe, en momenteel nog experimentele, <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/CSS_Container_Queries\">CSS container queries<\/a> kunnen reageren op de gedeeltelijke ruimte die beschikbaar is op een component binnen een layout.<\/li>\n<\/ul>\n<p>Deze opties gaan te ver voor dit artikel, maar ze zijn vaak wel geschikter dan eenvoudige media queries, die zich alleen maar kunnen aanpassen op de afmetingen van een scherm. Als je een layout kan bepalen zonder media queries, zal dit in de regel minder code gebruiken, effici\u00ebnter zijn, en minder onderhoud vergen.<\/p>\n<p>Desalniettemin zijn er genoeg opties waarbij media queries de enige redelijke opties zijn. Ze blijven dan ook essentieel wanneer je ook andere factoren mee wil nemen, zoals aspect ratio&#8217;s, ori\u00ebntatie van apparaten, kleurdiepte, nauwkeurigheid van de aanwijzer, en gebruikersvoorkeuren zoals minder animaties of de lichte\/donkere modus.<\/p>\n<h2>Heb je media queries nodig in JavaScript?<\/h2>\n<p>We hebben het tot nu toe vooral over CSS gehad. Dat komt omdat de meeste uitdagingen qua layout met uitsluitend CSS opgelost kunnen en <em>moeten<\/em> worden.<\/p>\n<p>Maar er zijn ook situaties waarbij het praktischer is om een JavaScript media query te gebruiken dan een CSS versie, bijvoorbeeld:<\/p>\n<ul>\n<li>Een bepaald onderdeel, zoals een menu, heeft verschillende functies op een groot en een klein scherm.<\/li>\n<li>Omschakelen van horizontale naar verticale ori\u00ebntatie van een apparaat verandert de functionaliteit van een app.<\/li>\n<li>Een game die aanraking gebruikt moet bijvoorbeeld de <code>&lt;canvas&gt;<\/code> layout wijzigen en de bediening aanpassen.<\/li>\n<li>Een webapp volgt de voorkeuren van een gebruiker, zoals een donkere of lichte modus, minder animaties, minder nauwkeurige aanraking, etc.<\/li>\n<\/ul>\n<p>De volgende onderdelen laten drie manieren zien die media queries gebruiken, of opties die daarop lijken, binnen <a href=\"https:\/\/kinsta.com\/nl\/blog\/vue-js\/\">JavaScript<\/a>. Alle voorbeelden sturen een state string terug, waarbij:<\/p>\n<ul>\n<li><strong>small <\/strong>view = een scherm met een breedte van minder dan 400 pixels;<\/li>\n<li><strong>medium <\/strong>view = een scherm met een breedte tussen de 400 en 799 pixels&#8217;; en<\/li>\n<li><strong>large <\/strong>view = een scherm met een breedte van 800 pixels of meer.<\/li>\n<\/ul>\n<h2>Optie 1: Het monitoren van de afmetingen van de viewport<\/h2>\n<p>Dit was de enige mogelijkheid voordat media queries ge\u00efmplementeerd werden. JavaScript zou zoeken naar &#8220;resize&#8221; events van de browser, de afmetingen van de viewport analyseren via <code>window.innerWidth<\/code> en <code>window.innerHeight<\/code> of (<code>document.body.clientWidth<\/code> en <code>document.body.clientHeight<\/code> in de oude IE) en daar vervolgens mee aan de slag gaan.<\/p>\n<p>Deze code geeft de berekende <strong>small<\/strong>, <strong>medium<\/strong>, of <strong>large<\/strong> string door naar de console:<\/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>Je kan <a href=\"https:\/\/codepen.io\/craigbuckler\/full\/mdmBymR\">hier een werkende demonstratie<\/a> zien. (Als je een browser op een computer gebruikt, kan je het beste een nieuw venster openen. Mobiele gebruikers kunnen het scherm draaien.)<\/p>\n<p>Bovenstaande voorbeeld bekijkt de grootte van de viewport wanneer de browser een nieuwe grootte krijgt, en bepaalt vervolgens of dit small, medium of large is, en stelt dat in als class in het body element, wat vervolgens de achtergrondkleur wijzigt.<\/p>\n<p>De voordelen van deze methode zijn onder meer:<\/p>\n<ul>\n<li>Het werkt in elke <a href=\"https:\/\/kinsta.com\/nl\/marktaandeel-desktopbrowsers\/\">browser<\/a> die JavaScript kan gebruiken, inclusief oude toepassingen.<\/li>\n<li>Je kan de precieze afmetingen vastleggen en die gebruiken.<\/li>\n<\/ul>\n<p>En de nadelen:<\/p>\n<ul>\n<li>Het is een oude techniek met veel code.<\/li>\n<li>Is het te precies? Moet je echt per se weten dat de breedte 966 px is, en niet 967?<\/li>\n<li>Je moet wellicht de afmetingen handmatig vergelijken met een vergelijkbare CSS media query.<\/li>\n<li>Sommige gebruikers veranderen de afmetingen van hun browser vaker, waardoor de handler functie steeds opnieuw uitgevoerd moet worden. Zeker bij oudere en tragere browsers kan dat problemen opleveren, waardoor ze een beperking instellen. Deze functie kan dan slechts \u00e9\u00e9n keer per 500 milliseconden geactiveerd worden.<\/li>\n<\/ul>\n<p>Kortom, de viewport afmetingen monitoren is geen goede optie, tenzij je ingewikkelde en specifieke redenen hebt om het wel te doen.<\/p>\n<h2 id=\"option2\">Optie 2: Een custom CSS eigenschap (variabele) bepalen en monitoren<\/h2>\n<p>Dit is een vrij ongebruikelijke techniek die de waarde van een custom eigenschappen string in CSS aanpast wanneer een media query geactiveerd wordt. Custom eigenschappen worden <a href=\"https:\/\/kinsta.com\/nl\/blog\/veiligste-browsers\/\">ondersteund in alle moderne browsers<\/a> (maar niet in IE).<\/p>\n<p>In het onderstaande voorbeeld wordt de <code>--screen custo property<\/code> ingesteld op &#8220;small&#8221;, &#8220;medium&#8221; of &#8220;large&#8221; door middel van een @media code block:<\/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>De waarde kan in CSS geproduceerd worden door middel van een pseudo-element (maar het moet dan wel binnen enkele of dubbele aanhalingstekens staan):<\/p>\n<pre><code class=\"language-css\">p::before {\n  content: var(--screen);\n}<\/code><\/pre>\n<p>Je kan de waarde van de custom property ophalen via JavaScript:<\/p>\n<pre><code class=\"language-js\">const screen = getComputedStyle(window.body)\n                 .getPropertyValue('--screen');<\/code><\/pre>\n<p>Maar dit is nog niet het hele verhaal, aangezien de uiteindelijke waarde ook alle witruimte en aanhalingsteken bevat die na de dubbele punt in CSS staan. De string zal dus \u201clarge&#8221; zijn, dus we moeten een beetje opruimen:<\/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>Je kan <a href=\"https:\/\/codepen.io\/craigbuckler\/full\/BaRwNzG\">hier een werkende demonstratie<\/a> zien. (Als je een browser op een computer gebruikt, kan je het beste een nieuw venster openen. Mobiele gebruikers kunnen het scherm draaien.)<\/p>\n<p>Het voorbeeld bekijkt elke twee seconden de waarde in CSS. Het vereist een beetje JavaScript code, maar dat is nodig om de veranderingen in de gaten te houden. Je kan in CSS namelijk niet automatisch detecteren dat de waarde van de custom property veranderd is.<\/p>\n<p>Het is ook niet mogelijk om de waarde naar een pseudo-element te schrijven en de verandering te detecteren via een <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/MutationObserver\">DOM Mutation Observer<\/a>. Pseudo-elementen zijn namelijk geen &#8220;echt&#8221; onderdeel van de DOM.<\/p>\n<p>De voordelen:<\/p>\n<ul>\n<li>Het is een eenvoudige techniek die vooral CSS gebruikt, en sterk lijkt op normale media queries.<\/li>\n<li>Je kan ook andere CSS eigenschappen aanpassen.<\/li>\n<li>Je hoeft geen JavaScript media query strings te kopi\u00ebren of te verwerken.<\/li>\n<\/ul>\n<p>Het voornaamste nadeel is dat je niet automatisch op een wijziging van een verandering in de browser-afmetingen kan reageren. Als de gebruiker hun telefoon dus draait, zal JavaScript dat niet meteen doorhebben. Je kan (nog) vaker kijken naar veranderingen, maar dat is ineffici\u00ebnt en zal in de vertraging resulteren die je in de demo ziet.<\/p>\n<p>Het monitoren van CSS custom properties is een nieuwe eigenschap, maar is alleen nuttig wanneer:<\/p>\n<ol>\n<li>De layout vaststaat op het moment dat een pagina voor het eerst weergegeven wordt. Een kiosk of <a href=\"https:\/\/kinsta.com\/nl\/blog\/stripe-versus-square\/\">betaalterminal<\/a> is bijvoorbeeld een mogelijkheid, maar die hebben meestal vaste afmetingen en een eenvoudige layout, dus dan zijn JavaScript media queries weer niet nodig.<\/li>\n<li>Een site of app gebruikt veel tijdsgebaseerde functies, zoals de animatie in een game. De custom property kan gecontroleerd worden wanneer er ook wordt gecontroleerd of de layout gewijzigd moet worden.<\/li>\n<\/ol>\n<h2>Optie 3: De matchMedia API gebruiken<\/h2>\n<p>De <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Window\/matchMedia\">matchMedia API<\/a> is wat ongebruikelijk, maar maakt het mogelijk om een JavaScript media query te implementeren. Het wordt <a href=\"https:\/\/caniuse.com\/matchmedia\">ondersteund in de meeste browsers<\/a>, inclusief IE vanaf versie 10. De constructor stuurt een <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/MediaQueryList\">MediaQueryList object<\/a> terug met een &#8216;matches&#8217; eigenschap, die True of False is voor de specifieke media query.<\/p>\n<p>De volgende code komt bijvoorbeeld op True uit voor een viewport die 800px of groter is:<\/p>\n<pre><code class=\"language-js\">const mqLarge  = window.matchMedia( '(min-width: 800px)' );\nconsole.log( mqLarge.matches );<\/code><\/pre>\n<p>Een &#8220;change&#8221; event kan toegepast worden op het MediaQueryList object. Dit wordt elke keer geactiveerd wanneer de staat van de &#8216;matches&#8217; eigenschap verandert: het wordt True (boven 800px) nadat het eerst False (onder 800px) was, en andersom.<\/p>\n<p>De ontvangende handler functie krijgt het MediaQueryList object als eerste parameter:<\/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>De handler wordt alleen uitgevoerd wanneer de &#8216;matches&#8217; eigenschap verandert. Het wordt dus niet uitgevoerd bij de eerste weergave van de pagina, dus je kan de functie direct callen om de startstatus te bepalen:<\/p>\n<pre><code class=\"language-js\">\/\/ initial state\nmqHandler(mqLarge);<\/code><\/pre>\n<p>De <a href=\"https:\/\/kinsta.com\/blog\/wordpress-http-api-part-2\/\">API<\/a> werkt goed wanneer je tussen twee specifieke states moet kiezen. Om drie of meer opties te analyseren, zoals <strong>small<\/strong>, <strong>medium<\/strong> en <strong>large<\/strong>, heb je meer code nodig.<\/p>\n<p>Begin door een screen state object te defini\u00ebren met de bijbehorende matchMedia objecten:<\/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>Het is niet nodig om een matchMedia object te defini\u00ebren voor de <strong>small<\/strong> state, aangezien de medium event handler geactiveerd wordt wanneer je wisselt tussen <strong>small\u00a0<\/strong>en <strong>medium<\/strong>.<\/p>\n<p>Event listeners kunnen vervolgens ingesteld worden voor de events <strong>medium<\/strong> en <strong>large<\/strong>. Deze callen dezelfde mqHandler() handler functie:<\/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>De handler functie moet alle MediaQueryList objecten controleren om te bepalen of <strong>small<\/strong>,\u00a0<strong>medium<\/strong>, of\u00a0<strong>large\u00a0<\/strong> momenteel actief is. Matches moeten op volgorde uitgevoerd worden, aangezien een breedte van 999px klopt bij zowel <strong>medium<\/strong> als <strong>large<\/strong>, maar alleen de grootste zou geactiveerd moeten worden.<\/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>Je kan <a href=\"https:\/\/codepen.io\/craigbuckler\/full\/VwbMroZ\">hier een werkende demonstratie<\/a> zien. (Als je een browser op een computer gebruikt, kan je het beste een nieuw venster openen. Mobiele gebruikers kunnen het scherm draaien.)<\/p>\n<p>De mogelijkheden voor dit voorbeeld zijn:<\/p>\n<ol>\n<li>Media queries in CSS die een custom property instellen en weergeven (zoals in <strong>optie 2<\/strong> te zien).<\/li>\n<li>Identieke media queries in matchMedia objecten die veranderingen in afmetingen monitoren via JavaScript. De JavaScript output zal dan op precies hetzelfde moment veranderen.<\/li>\n<\/ol>\n<p>De voordelen van de matchMedia API zijn:<\/p>\n<ul>\n<li>Het is event-driven en effici\u00ebnt in het verwerken van veranderingen bij de media query.<\/li>\n<li>Het gebruikt precies dezelfde media query strings als CSS.<\/li>\n<\/ul>\n<p>En de nadelen:<\/p>\n<ul>\n<li>Twee of meer media queries uitvoeren vereist een hoop denkwerk en logica in de code.<\/li>\n<li>Je moet waarschijnlijk dubbele media queries strings maken in CSS en JavaScript. Dit kan fouten opleveren.<\/li>\n<\/ul>\n<p>Om fouten tussen media queries te voorkomen, zou je design tokens in je systeem kunnen inbouwen. Media query strings worden gedefinieerd in een JSON bestand (of iets soortgelijks) en de waarden worden overgezet naar de CSS en JavaScript code tijdens het opbouwen.<\/p>\n<p>Samenvattend is de matchMedia API waarschijnlijk de meest effici\u00ebnte en praktische manier om een JavaScript media query te implementeren. Je moet opletten op een paar ongebruikelijke dingen, maar het meestal de beste oplossing.<\/p>\n\n<h2>Samenvatting<\/h2>\n<p>Intrinsieke CSS mogelijkheden voor afmetingen zijn erg handig, maar media queries zullen voor de meeste websites de basis blijven voor hun <a href=\"https:\/\/kinsta.com\/nl\/blog\/responsive-webdesign\/\">responsive webdesign<\/a>. Ze zullen altijd nodig zijn om complexere layouts en voorkeuren te verwerken, zoals een donkere en lichte modus.<\/p>\n<p>Probeer media queries zoveel mogelijk tot puur CSS te beperken. Wanneer je geen keuze hebt, en wel bezig moet met JavaScript, dan biedt de matchMedia API extra controle over onderdelen van je JavaScript media query, die extra functionaliteit vereist op basis van afmetingen.<\/p>\n<p>Heb je nog andere tips voor het implementeren van een JavaScript media query? Deel ze in de reacties hieronder!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>De meeste moderne websites gebruiken inmiddels technieken voor responsive webdesign, zodat websites er mooi, leesbaar en functioneel uitzien, onafhankelijk van de schermgrootte van de bezoeker, of &#8230;<\/p>\n","protected":false},"author":188,"featured_media":40143,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[431,412],"topic":[877,848],"class_list":["post-40140","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-javascript-frameworks","topic-gebruikerservaring","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>Uitgebreide uitleg over het gebruik van media queries in JavaScript<\/title>\n<meta name=\"description\" content=\"Media queries worden normaal gesproken gedefinieerd in CSS om de layout van een site responsive te maken. Media queries kunnen ook in JavaScript worden gebruikt.\" \/>\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\/nl\/blog\/javascript-media-queries\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Uitgebreide uitleg over het gebruik van media queries in JavaScript\" \/>\n<meta property=\"og:description\" content=\"Media queries worden normaal gesproken gedefinieerd in CSS om de layout van een site responsive te maken. Media queries kunnen ook in JavaScript worden gebruikt.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-29T12:20:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-23T07:53:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/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 worden normaal gesproken gedefinieerd in CSS om de layout van een site responsive te maken. Media queries kunnen ook in JavaScript worden gebruikt.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/09\/javascript-media-query.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@craigbuckler\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Craig Buckler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/\"},\"author\":{\"name\":\"Craig Buckler\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/715d986404b06691ab3014e06596908e\"},\"headline\":\"Uitgebreide uitleg over het gebruik van media queries in JavaScript\",\"datePublished\":\"2021-09-29T12:20:23+00:00\",\"dateModified\":\"2023-05-23T07:53:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/\"},\"wordCount\":2827,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/09\/javascript-media-query.jpeg\",\"keywords\":[\"JavaScript\",\"JavaScript Frameworks\"],\"articleSection\":[\"Webdevelopment\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/\",\"name\":\"Uitgebreide uitleg over het gebruik van media queries in JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/09\/javascript-media-query.jpeg\",\"datePublished\":\"2021-09-29T12:20:23+00:00\",\"dateModified\":\"2023-05-23T07:53:24+00:00\",\"description\":\"Media queries worden normaal gesproken gedefinieerd in CSS om de layout van een site responsive te maken. Media queries kunnen ook in JavaScript worden gebruikt.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/09\/javascript-media-query.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/09\/javascript-media-query.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Een uitgebreide uitleg over het gebruik van media queries in JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gebruikerservaring\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/gebruikerservaring\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Uitgebreide uitleg over het gebruik van media queries in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"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\/nl\/#\/schema\/person\/715d986404b06691ab3014e06596908e\",\"name\":\"Craig Buckler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/craigbuckler\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Uitgebreide uitleg over het gebruik van media queries in JavaScript","description":"Media queries worden normaal gesproken gedefinieerd in CSS om de layout van een site responsive te maken. Media queries kunnen ook in JavaScript worden gebruikt.","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\/nl\/blog\/javascript-media-queries\/","og_locale":"nl_NL","og_type":"article","og_title":"Uitgebreide uitleg over het gebruik van media queries in JavaScript","og_description":"Media queries worden normaal gesproken gedefinieerd in CSS om de layout van een site responsive te maken. Media queries kunnen ook in JavaScript worden gebruikt.","og_url":"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2021-09-29T12:20:23+00:00","article_modified_time":"2023-05-23T07:53:24+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/09\/javascript-media-query.jpeg","type":"image\/jpeg"}],"author":"Craig Buckler","twitter_card":"summary_large_image","twitter_description":"Media queries worden normaal gesproken gedefinieerd in CSS om de layout van een site responsive te maken. Media queries kunnen ook in JavaScript worden gebruikt.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/09\/javascript-media-query.jpeg","twitter_creator":"@craigbuckler","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Craig Buckler","Geschatte leestijd":"15 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/"},"author":{"name":"Craig Buckler","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/715d986404b06691ab3014e06596908e"},"headline":"Uitgebreide uitleg over het gebruik van media queries in JavaScript","datePublished":"2021-09-29T12:20:23+00:00","dateModified":"2023-05-23T07:53:24+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/"},"wordCount":2827,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/09\/javascript-media-query.jpeg","keywords":["JavaScript","JavaScript Frameworks"],"articleSection":["Webdevelopment"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/","url":"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/","name":"Uitgebreide uitleg over het gebruik van media queries in JavaScript","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/09\/javascript-media-query.jpeg","datePublished":"2021-09-29T12:20:23+00:00","dateModified":"2023-05-23T07:53:24+00:00","description":"Media queries worden normaal gesproken gedefinieerd in CSS om de layout van een site responsive te maken. Media queries kunnen ook in JavaScript worden gebruikt.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/09\/javascript-media-query.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/09\/javascript-media-query.jpeg","width":1460,"height":730,"caption":"Een uitgebreide uitleg over het gebruik van media queries in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/javascript-media-queries\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"Gebruikerservaring","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/gebruikerservaring\/"},{"@type":"ListItem","position":3,"name":"Uitgebreide uitleg over het gebruik van media queries in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","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\/nl\/#\/schema\/person\/715d986404b06691ab3014e06596908e","name":"Craig Buckler","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/craigbuckler\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/40140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/188"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=40140"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/40140\/revisions"}],"predecessor-version":[{"id":52695,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/40140\/revisions\/52695"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/40140\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/40140\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/40140\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/40140\/translations\/de"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/40140\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/40140\/translations\/it"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/40140\/translations\/nl"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/40140\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/40143"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=40140"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=40140"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=40140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}