Mediaquery.js

Keeps JavaScript and CSS in sync using a unique approach that allows you to control styles for responsive design without doing user-agent detection.

View the Project on GitHub skaiser/mediaquery.js

Demo: Be responsive, but only at page load

Step 1: Resize the browser window

Notice nothing changed? The site appears static, right? Go to Step 2.

Step 2: Without resizing the browser, refresh the page

The layout should have responded to the new browser width. (If not, try resizing some more.)

Step 3: Resize the browser again

Notice the layout is still adapted to the same screen size as it was when the page was loaded.

Step 4: Big deal, you say?

The page is actually responding to your screen width 100% on the client-side using the reliability of CSS media queries, but giving control to JavaScript, so that you can be sure they both think the browser is at the same size. JavaScript may not report things exactly the same cross-browser and it certainly may differ from what CSS media queries may think the browser width is. It also causes maintenance overhead because you need to define the breakpoints in CSS and in your JavaScript.

Step 5: How does it work?

It uses CSS media queries to assign the width of an invisble element (<script> by default) and then JavaScript reads the width of that element and applies the needed CSS class (more information on the technique).

Here is what class(es) we currently have on the page:

Step 6: Still want to be responsive after page load?

Check out the more dynamic demo

Step 7: Learn

Go read the full API

Debug Info:

Check this page in different browsers/devices and see what you get (report a bug).

screen.width window.outerWidth CSS media query JSS media query