Javascript-Powered Cross-browser Media Queries and Events
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


MediaClass adds and removes responsive classnames to the document or individual elements.

What queries does it support, exactly?

  • width / height / aspect-ratio / orientation
  • device-, this-, min-, max-, below-, and above-.
  • em, in, pt, px, and %.
MediaClass("mobile", "(max-width: 480px)");

So, how do I use it?

Then, when the page is at or below 480px in width.

<html class="mobile">

Additionally, selectors and a this syntax target elements and their measurements.

MediaClass("small", ".widget:media(this-max-width: 480px)");

Then, when the element is at or below 480px in width.

<div class="widget small"></div>

What else does it do?

The above or below syntax expands targeting. mobile-small triggers when the browser window is below 20em (320px) in width.

MediaClass("mobile-small", "(max-width: 20em)");

Assign the query to a variable.

var mq = MediaClass("mobile-small", "(max-width: 20em)");

Change it. = "(below-width: 20em)");

Remove it.


What's the license?


And you are?

MediaClass is a project by Jonathan Neal.