The modern device ecosystem requires webpages that seamlessly resize and reposition elements on the screen in response to the size of the screen — in other words, responsive webpages. CSS offers an excellent tool for making responsive webpages: media queries. In case you are not familiar with CSS, the example below shows a media query that adds styling to specific elements on the page when the screen is at least 1024 pixels wide.

@media screen and (min-width: 1024px) {
    #main-content {
        min-height:25vh;
        display:flex!important;
        flex-wrap:wrap!important;
        align-content:space-around!important;
    }

    #main-content h1, #main-content p, #main-content div {
        width:100%!important;
    }

}

This solution works when you control the CSS stylesheet, but what if you are using a CSS framework like Bootstrap or Bulma? What if you you need something other than a style change, such as calling a function or changing the value of a variable, depending on the size of the screen? This post explores two options available in JavaScript: the window.innerWidth property and the onresize event.

1. window.innerWidth

Many CSS frameworks operate by applying styling and positioning to an element based on that element’s class. These frameworks usually have responsiveness built-in, but the details of your page design may require some specific changes to an element’s style, position, or visibility beyond the built-in properties associated with a particular class in the framework you are using. To get the desired effect, you may need to assign a different class to an element depending on the size of the window.

Similarly, you might want to display more elements on a desktop screen than a phone screen. The window.innerWidth property facilitates these operations. The code example below demonstrates applying classes to elements and assigning a value to a variable based on the size of the window (in this case, if the window is at least 1024 pixels wide).

if (window.innerWidth >= 1024) {
    document.getElementById("bookshelf").classList.add("mx-0");
    document.getElementById("library").classList.remove("py-1");
    document.getElementById("book").setAttribute("class", "mx-0");
    numBooks = 9;
}

The window.innerWidth property works well if you need to detect the size of the window at a particular point in time, such as when the page first loads or when a function executes. In the example above, if the page is shown on a mobile device, none of the class changes will occur, and the value of the numBooks variable will not change. But on a larger screen, those things will happen. But what if the window starts out at a particular size and then gets resized? If the code above has already run, nothing changes.

2. onresize

The onresize event can trigger some code to run in reaction to the window being resized. As with any JavaScript event, there are multiple ways to attach an event listener to an object (see below).

// Using the onresize property of an object:
window.onresize = function() {};

// Using the addEventListener() method:
window.addEventListener("resize", myFunction);

Of course, there are two limitations to this approach:

1. The onresize event does not inherently care about the actual size of the screen, only the fact that it has changed.
2. The onresize event only fires when the size of the object (in this case, the window) changes. If a user loads the page on a mobile device or a desktop and the size of the window does not change, the program still has no information about what it should do based on the size of the window.
   Maybe that is not a problem. Your particular situation might only require something to happen based on the window size at a particular point in time, or it may only require something to happen when the window is resized. However, if something has to happen based on the size of the window, then it usually has to happen regardless of when the window acquires that size.

Both, And

To solve this dilemma, think of these options — the window.innerWidth property and the onresize event — not as an either, or choice, but as a both, and proposition, like a one-two punch in boxing:

1. Begin with a conditional statement that checks the window.innerWidth property and takes action accordingly when the page loads.
2. Add an onresize event listener that checks the window.innerWidth property and takes appropriate action any time the size of the window changes.

With the combination of the window.innerWidth property and the onresize event listener, you have the power to make your JavaScript code responsive.