MediaClass adds and removes responsive classnames to the document or individual elements.
- width / height / aspect-ratio / orientation
- device-, this-, min-, max-, below-, and above-.
- em, in, pt, px, and %.
MediaClass("mobile", "(max-width: 480px)");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>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();MIT
MediaClass is a project by Jonathan Neal.