Support for non-pixel based media queries

First off: great module, I use it on a lot of my projects.

But I find the way this module works to be not completely compatible with my css media queries. I use SASS, which renders em-based media queries such as @media (min-width: 71em). Now let's say I want CS Adaptive Image to show a different image in this particular media query, to go along with the different layout. Right now the only option we have is to guess/estimate how many pixels 71 ems are, which is hardly an accurate solution.
Since javascript can't give us the window size in ems, we need a different way to determine in which media query we currently. Enter this solution, which makes use of pseudo-elements in css (which are then picked up by js) to do this. I've written a patch which combines this solution with this module.

So how does this work exactly?

All you need to do is add css like this inside your media queries:

@media (min-width: 71em) {
body:after {
        content: 'widescreen';
        display: none;
    }
}

As you can see, this css doesn't really do anything or change your layout in any way, but the value of the content attribute ('widescreen' in this case) will be picked up by our javascript. This way we'll always know with 100% certainty in what media query we are.
The value of your content attribute is what you will need to fill in where you would normally enter a pixel-value in the Manage Display settings of your image field.

Hope this helps anyone.