3 years ago

To execute a piece of code when the viewport is a certain size, the first thing that comes to mind is adding a resize event listener to the window object. This is the well-known way to trigger something in JavaScript when the viewport size changes.

If the browser window is 1200px wide, and the user resizes, the callback will be called n times until they.

Or, we can use the declarative matchMedia listener that will only execute when the match result changes.

Since it’s built on media queries, you can use matchMedia for other things too—like dark mode!