Skip to content

Latest commit

 

History

History
67 lines (43 loc) · 1.21 KB

README.md

File metadata and controls

67 lines (43 loc) · 1.21 KB
Raw

MediaClass

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.

mq.media = "(below-width: 20em)");

Remove it.

mq.remove();

What's the license?

MIT

And you are?

MediaClass is a project by Jonathan Neal.