An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Getting notified in JavaScript when a Media Query changes
Media queries are awesome and well used in modern web development.
But how can one notify JavaScript if a certain media query is met.
There is a window listener called: matchMedia
, and it does exactly this!
This is what we will be making today:
JavaScript Media Query Changes
To use matchMedia
we call the following:
var mediaQuery = window.matchMedia('(max-width: 500px)');
To use it we can add listeners to it:
mediaQuery.addListener(console.log);
Now if we size our screen with the console open it will fire a console log each this this media queries matches.
The return will have a MediaQueryListEvent
, which contains a value called matches
to say true or false.
Console logs are cool, but it doesn't really do much for us, so we can also attach a function:
mediaQuery.addListener(alertMe);function alertMe(e) { if (e.matches) { document.body.style.backgroundColor = 'green'; } else { document.body.style.backgroundColor = 'red'; }}
Now, if we resize and hit the media query, our screen will turn green or red depending on yes or no.
See this Codepen for a demo.
More on MediaQueryList here MDN Web Docs
Browser Support
This function has really good support!
For a novice function, definitely, one to use in projects.
Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
Original Link: https://dev.to/dailydevtips1/getting-notified-in-javascript-when-a-media-query-changes-5a33
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To