Skip to content

jonathantneal/MediaClass

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 

Repository files navigation

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.

About

Javascript-Powered Cross-browser Media Queries and Events

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published