Mediaquery.js

Demo: "Normal" responsive mode

Step 1: Resize the browser window

Notice the page adapting like it would normally using CSS media queries.

Step 2: Uh, I can already do that, so what?

You can, but JavaScript may or not be in sync with your CSS media queries, so some of your users may be seeing layout/style changes, but any JavaScript that you need to run at a given browser size may not agree across browsers or with your CSS.

Step 3: Ok, so what is this doing then?

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.

Step 4: 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 5: Want more control over when the page changes?

Check out the static demo

Step 6: Learn

Go read the full API