https://github.com/rejas/mediaquery-event

Get events when mediaquery changes happen
https://github.com/rejas/mediaquery-event

es6 mediaquery vanilla-javascript

Last synced: 10 days ago
JSON representation

Get events when mediaquery changes happen

• Host: GitHub
• URL: https://github.com/rejas/mediaquery-event
• Owner: rejas
• License: mit
• Created: 2017-02-07T10:57:41.000Z (almost 8 years ago)
• Default Branch: main
• Last Pushed: 2024-12-10T10:55:47.000Z (about 2 months ago)
• Last Synced: 2025-01-04T04:32:44.445Z (23 days ago)
• Topics: es6, mediaquery, vanilla-javascript
• Language: JavaScript
• Homepage:
• Size: 493 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# mediaquery-event

Get events when mediaquery changes happen. written in plain vanilla js.

## example

```

document.addEventListener('mediaquery', function (event) {

  if (!event.detail.active) {

    return; // dont react to mediaqueries becoming inactive

  }

  

  if (event.detail.media === 'desktop') {

      // do something

  }

  

  if (event.detail.media === 'mobile') {

      // do something else

  }

});

mqe.init({

    mediaqueries: [

        {name: 'mobile', media: 'screen and (max-width: 1023px)'},

        {name: 'desktop', media: 'screen and (min-width: 1024px)'}

    ]

});

```

## bugs and caveats

Good ol' InternetExplorer handles some stuff differently (no kiddin'), not all of

[these "issues"](http://www.javascriptkit.com/dhtmltutors/cssmediaqueries4.shtml) are handled yet:

- Your mediaquery.media should start with "screen and", otherwise IE adds its own idea to it.