Add em support?

[patrick-wc]

This is exactly what I want to use in my projects in future, however I've started to use em based media queries rather than pixel based MQs recently. Is the ordering by px described in the documentation limited to only px values, could the code be amended to accept em values too? That would be pretty sweet.

I'll give it a go myself when I start building my next project.

[ivankravchenko]

@zerodburn, thank you for your request and suggestion. Adding em support is simple, but to determine best implementation I need good understanding how to use em for MQ and how em can interact with px in MQ. Can you please explain how you use em in MQ and what is motivation to not to use px in MQ?

[cstegeman]

As other people can much better explain that using em's for media queries is very useful: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

Say you use you TV to browse a website (youtube yeey!) I zoom in on the webpage. If you use em's for media queries than the screen becomes smaller and the browser switches to a smaller media query which is very handy because there is less space on the screen (because everything is bigger).

And because now I'm working on a large project and want to use this plugin. But if you use em's media queries aren't sorted. Which makes this plugin rather useless because the layout breaks. Also 0 (as in zero) without px isn't sorted the correct way

Any hope on getting this implemented soon?

[ivankravchenko]

I think I'm quite late, sorry about that :) Added naive em support through https://github.com/SE7ENSKY/group-css-media-queries/commit/f41483815dbbc37b22dc96fca3cf0b90541dcfdb (v1.2.0) That solution treats em same as px. I am not sure how sufficient it is though. It might need to take into account how exactly em relate to px through reading font-size for given media. I would appreciate any thoughts.

[cstegeman]

Thanks for the update. It all depends on how you implement media queries. If you have a current website on which you implement this plugin it can get rather messy. There can be min, max, min-max queries etc and the order can be very specific.

This won't work if you use em and px media queries with the current implementation. What you could do to fix this is convert em's to px and use that to decide the final order for the media queries. The best base font-size for em based media queries is 16px (https://css-tricks.com/em-based-media-queries-are-based-on/)

So if you start using this plugin you really have to start from a blank slate and be very strict about your media queries (which is of course a good thing) and keep in mind that combination of media queries are put at the end, which can create serious bugs

I would also recommend fixing the 0(px|em) bug, because now just zero cannot be used.

Hope this helps!

[ivankravchenko]

Hey @cstegeman, thanks for following up!

I've added 0 and "static"em support (1em=16px) in v1.3.1. Please let me know if that's helpful.

Also, would you expect group-css-media-queries read em-to-px ratio from body { font-size: 14px; }?

[cstegeman]

Hi @ivankravchenko,

This is absolutely helpful

Reading the em base size from the body would not be useful, because it cannot be influenced (for em based media queries at least). So keeping it at 16 is the best thing to do for now.

[DonGissel]

So, I've JUST started using this feature, and there's a big problem: only integers are supported (pattern is \d+), but floating point values are not. So a media query like this: @media (min-width: 71.775em), which is a very real possibility, is going to end up in a very different place, messing up the sorting and what not.

[Tyree]

As @DonGissel mentioned, this isn't working with em completely. I am using floating point values and they are ending up in seemingly random order. This results in the wrong media queries overriding the proper ones. Is there a fix in the works? Thanks!

[Tyree]

Oh, several years since an update. Guess I'll disable this one then.