Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
js
 
 
 
 
 
 

Media Query Events

This small script:

  • Finds all media query rules in any stylesheets on a page
  • For each of those MediaRules creates a MatchMedia thingy
  • Adds a listener to each MatchMedia object
  • Calls a provided changeMediaHandler each time a MatchMedia event fires
  • Is a work in progress

Usage

The mqEvents function is attached to the window object, which it probably should not be.

Run mqEvents().

Pass it a single function parameter that will run each time a MatchMedia event fires. The function will be passed the MediaQueryList from the event.

Example

mqEvents(function (mql) {
    if (mql.matches) {
        // Media query condition was met
    }
    else {
        // Media query condition was not met
    }
});

Reference

About

Script to add a MatchMedia event for each media query in a page's stylesheets

Resources

Releases

No releases published

Packages

No packages published