MoreLesson 275Free preview

JS Media Queries

This lesson is part of How To · All levels

Summary

JavaScript can read the same query media as CSS via window.matchMedia(). The resulting object has matches properties to know if the query is active, as well as event change when the result changes. It's useful when JavaScript behavior, not just the display, needs to adjust the screen size.

Key points

Window.matchMedia('(max-width: 600px)') created the MediaQueryList object.
The matches property is worth true if the query is matching.
Event change is triggered when the viewport changes through the breakpoint.
Delete the listener when not needed to avoid memory leakage.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.