GitHub

PostCSS plugin converts min/max-width media queries to classes, useful for clients that do not support media queries e.g. IE8.

Examples

/* Input example */
@media (min-width: 768px) and (max-width: 991px) {
    .foo {
        float: left;
    }
}

/* Output example */
.min-width-768px.max-width-991px .foo {
    float: left;
}

Usage

postcss([ require('postcss-mqwidth-to-class') ])

See PostCSS docs for examples for your environment.

Notes

Only supports px units.
Ignores anything else in the query, e.g. screen, print, orientation.
You'd need JavaScript to add the classes to the <html> or <body> tags. E.g. mqwidth-to-class.js.
For IE8, off the bat you can have the <html> tag via conditional comments.

Credit

I used the PostCSS Boilerplate and these two projects as a base:

Changelog

License

Read the original on github.com ↗