Source: sebastiandedeyne.com

The window.matchMedia API

We think you might be interested in this job:

Lead Full-Stack Developer

SPARK Business Works

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!
Newsletter

Get the latest Laravel/PHP jobs, events and curated articles straight to your inbox, once a week

Fathom Analytics | Fast, simple and privacy-focused website analytics. Fathom Analytics | Fast, simple and privacy-focused website analytics.
Community Partners