Tuesday Tips | How to Integrate Media Queries into JavaScript

Today is September 1, 2020, and for this Tuesday Tips episode
we're covering How to Integrate Media Queries into JavaScript


Let's dive in!


----


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?


----


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.


----


There is a window listener in JavaScript called matchMedia which
will listen for a specific value and trigger when true. For
example:
var mediaQuery = window.matchMedia('(min-width: 768px)');

When we add a listener to the variable it can run a function:
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.


----


The matchMedia function is widely supported, including full
support for Internet Explorer 10 and 11.


----


Today’s Tuesday Tips was adapted from a post on Daily Dev Tips.


----


Want to know more? Head to fewdaily.com for more of today’s
topics and other front-end web content! If you liked what you
heard be sure to rate, review, and subscribe on your platform of
choice. That's all for today, tune in tomorrow!