基于IE8和REM的媒体查询

Question

I would like to base my media queries on REM to support all kinds of browser zooming and/or base/browser font resizing by the user. Ideally down to IE8.

Loading jQuery, HTMLshiv, Respond and the REM polyfill and turns out the REM polyfill does not support media queries. Don't really understand why though, https://github.com/chuckcarpenter/REM-unit-polyfill/issues/60#issuecomment-135187895 but that is fact.

What did Chuck mean with saying " to ignore MQ rules when the polyfill was kicked in, since support would only be required at desktop ". So when the polyfill kicked in MQ support was dropped? And why would MQ support in IE8 only be needed for desktop?

Can it not be that some users don't have the browser window fully open but just one half or quarter of the screen and thus have a smaller screen-width? I don't have my browser at full size most of the time to be able to do work in the other windows etc.

So, now how do you girls and guys do support REM based media queries in IE8?

Would a fallback like mentioned here https://stackoverflow.com/a/21122705/1010918 work?

@media screen and (min-width: 26.25rem , min-width: 420px) { ?

I don't think this would work (I wish I wish!!) so I am really left with assigning a different stylesheet to IE8 with conditional comments?

Is this how you go about it? What are my possibly other solutions?

I have read and thought about all these:
Basic CSS features not working in IE8
How do you use mobile-first in IE8
media query unlinking IE8 stylesheet
modernizr for ie8 media query support
What´s best practice to responsive design? Use % or em and rem?
IE8 support for CSS Media Query

Check this vid for an example of REM based design. I am sure that can also be done with ie8 somehow.
http://webdesign.tutsplus.com/courses/responsive-web-design-revisited/lessons/what-responsive-means-today-and-what-youll-be-building

Answer 1

IE8 doesn't support media queries either, so it's not that the polyfill is turning them off, it's just that IE8 simply doesn't support them.

What did Chuck mean with saying " to ignore MQ rules when the polyfill was kicked in, since support would only be required at desktop ". So when the polyfill kicked in MQ support was dropped? And why would MQ support in IE8 only be needed for desktop?

He means that IE8 only runs on the desktop, so there's no point supporting it in a responsive way.

Can it not be that some users don't have the browser window fully open but just one half or quarter of the screen and thus have a smaller screen-width? I don't have my browser at full size most of the time to be able to do work in the other windows etc.

Okay, so maybe there is a point to supporting it in a responsive way, but it's not a good enough reason for the developer -- he decided that the extra difficulty in adding this support would be too much work to make it worthwhile.

He does say in the ticket that if anyone else wants to do the work and submit the code changes, then he'll consider bringing them into the library, but he's not going to do it.

How much work is it?

Well, it's worth pointing out again that IE8 doesn't support media queries. So in order to get MQs at all in IE8, you need to use another polyfill library such as RespondJS.

Therefore, the work of making IE8 REMs work with MQs is actually work to make the REM polyfill and RespondJS know about each other and work together -- there's a good chance that you'd need to make changes to both libraries to make it work at all. It could be very difficult to do. I can certainly understand why they decided not to bother.

So as things stand, I think you are going to have to accept that what you want to do is not possible in IE8. Unless you want to start hacking around in the polyfill libraries to fix it for yourself.

Answer 2

You actually have a real option that works since I ran into the same problem. Not sure there will be a lot of people interested by this solution in 2017 but it works!

https://github.com/nbouvrette/remPolyfill