https://github.com/pyrsmk/mediatizr

A media queries polyfill
https://github.com/pyrsmk/mediatizr

Last synced: about 2 months ago
JSON representation

A media queries polyfill

• Host: GitHub
• URL: https://github.com/pyrsmk/mediatizr
• Owner: pyrsmk
• License: mit
• Archived: true
• Created: 2011-11-18T09:40:07.000Z (almost 13 years ago)
• Default Branch: master
• Last Pushed: 2019-04-16T09:30:42.000Z (over 5 years ago)
• Last Synced: 2024-07-17T06:03:57.455Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 2.12 MB
• Stars: 38
• Watchers: 3
• Forks: 10
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
mediatizr 0.4.3

===============

__Since media queries are [supported by all modern browsers](https://www.caniuse.com/#feat=css-mediaqueries), this library is considered obsolete.__

Mediatizr adds media queries to browsers that don't support it (like Internet Explorer 5.5-8). It's based on [Sheethub](https://github.com/pyrsmk/Sheethub) and [W](https://github.com/pyrsmk/W) to have a better compatibility with retrieving stylesheets and responsive events.

Install

-------

You can pick the minified library or install it with :

```

jam install pyrsmk-mediatizr

bower install mediatizr

npm install pyrsmk-mediatizr

```

Features

--------

- px/em values

- min-width/max-width

- min-device-width/max-device-width

- resizing, zooming and text size changing will re-evaluate media queries for live responsive adjustment

- @keyframes friendly

- expose current media queries support with `window.supportMediaQueries`

Use

---

Link the script at the top of your page, under your stylesheet declarations. There's several versions of mediatizr, depending on what dependency is included on. Most of the time you want to pick `mediatizr.Sheethub.W.min.js`.

Caveats

-------

There's some issues between IE<8 and em values in W. If you've planned to use `em` units in your media queries and you want to support IE6/7, then you _must_ load mediatizr when the DOM is ready.

Using mediatizr with `STYLE` stylesheets (sheets that have been included to the HTML page itself) doesn't work, because when the browser parses the `STYLE` node and encounters rules that it doesn't understand then it will simply drop them, and your media queries are just lost. For...ever.

License

-------

Mediatizr is brought to you with the [MIT license](http://dreamysource.mit-license.org).