Add class or other attribute using media query

Question

I\'m currently using CSS media queries to target some small/medium screen devices like this:

@media screen and (min-device-width: 480px) {
  ...
}
@media screen          


        

Answer 1

It cannot be done with plain CSS.

Have a look at LESS or SASS. They are designed to make working with CSS more dynamic and flexible.

• http://lesscss.org
• http://sass-lang.com

Once you use them. You can't live without them.

---

In case you want to add a existing class selector to the body on certain resolutions.

SASS

.some-style { background-color:red; }

@media screen and (min-device-width: 480px) {
    body {
        @extend .some-style;
    }
}

Answer 2

A JavaScript solution

if (window.matchMedia("(min-device-width: 480px)").matches {
    // modify dom
}

Answer 3

Check out Enquire.js. Lightweight, pure JavaScript library for handling media queries. Looks pretty cool.

Answer 4

For this also can help Modernizr - can detect even if svg enabled or other features is enabled.

http://modernizr.com/

Answer 5

take a look at conditionizr this could be what your looking for http://conditionizr.com/