
There's no doubt about it, media queries are one of the most useful CSS features for a modern website. They allow you to create a breakpoint for your website where you can adjust styles for larger or smaller screen sizes. While this is great for use in CSS, what if you want to utilize media queries in JavaScript?

## Recognize a Media Query in JavaScript

As with anything in JavaScript, there are multiple ways to accomplish a task. For example, a method for recognizing media queries in JavaScript is to check if an element is visible. So, if the mobile menu button is visible do a certain JS function. And you would put this in a function whenever the window resizes. While this may get the job done, there is perhaps a better and cleaner way to accomplish the same task.

## matchMedia

There is a window listener in JavaScript called `matchMedia` which will listen for a specific value and trigger when true. For example:

``` js
var mediaQuery = window.matchMedia('(min-width: 768px)');
```

When we add a listener to the variable it can run a function:

``` js
mediaQuery.addListener(console.log);
```

This opens the possibility of passing any function to the listener and only having that function run on certain screen widths.

## Browser Support

The `matchMedia` function is [widely supported](https://caniuse.com/#search=matchmedia), including full support for Internet Explorer 10 and 11.

## Credit

_Today’s Tuesday Tips was adapted from [a post on Daily Dev Tips](https://daily-dev-tips.com/posts/getting-notified-in-javascript-when-a-media-query-changes/)._


<p>There&#39;s no doubt about it, media queries are one of the most useful CSS features for a modern website. They allow you to create a breakpoint for your website where you can adjust styles for larger or smaller screen sizes. While this is great for use in CSS, what if you want to utilize media queries in JavaScript?</p>

<h2>Recognize a Media Query in JavaScript</h2>

<p>As with anything in JavaScript, there are multiple ways to accomplish a task. For example, a method for recognizing media queries in JavaScript is to check if an element is visible. So, if the mobile menu button is visible do a certain JS function. And you would put this in a function whenever the window resizes. While this may get the job done, there is perhaps a better and cleaner way to accomplish the same task.</p>

<h2>matchMedia</h2>

<p>There is a window listener in JavaScript called <code>matchMedia</code> which will listen for a specific value and trigger when true. For example:</p>

<p><code> js
var mediaQuery = window.matchMedia(&#39;(min-width: 768px)&#39;);
</code></p>

<p>When we add a listener to the variable it can run a function:</p>

<p><code> js
mediaQuery.addListener(console.log);
</code></p>

<p>This opens the possibility of passing any function to the listener and only having that function run on certain screen widths.</p>

<h2>Browser Support</h2>

<p>The <code>matchMedia</code> function is <a href="https://caniuse.com/#search=matchmedia">widely supported</a>, including full support for Internet Explorer 10 and 11.</p>

<h2>Credit</h2>

<p><em>Today’s Tuesday Tips was adapted from <a href="https://daily-dev-tips.com/posts/getting-notified-in-javascript-when-a-media-query-changes/">a post on Daily Dev Tips</a>.</em></p>

Assets

Square

How to Integrate Media Queries into JavaScript

View post on our website

Tall

How to Integrate Media Queries into JavaScript

View post on our website

Wide

How to Integrate Media Queries into JavaScript

View post on our website

Other

How to Integrate Media Queries into JavaScript