基于 IE8 和 REM 的媒体查询

Question

我希望我的媒体查询基于 REM，以支持用户进行各种浏览器缩放和/或基本/浏览器字体大小调整。理想情况下到 IE8。

加载 jQuery、HTMLshiv、Respond 和 REM polyfill，结果 REM polyfill 不支持媒体查询。虽然不太明白为什么，https://github.com/chuckcarpenter/REM-unit-polyfill/issues/60#issuecomment-135187895 但这是事实。

Chuck 说“在启动 polyfill 时忽略 MQ 规则，因为仅在桌面上需要支持”是什么意思。那么当 polyfill 在 MQ 支持中被踢掉的时候呢？为什么 IE8 中的 MQ 支持仅适用于桌面？

难道不是有些用户没有完全打开浏览器窗口，而是只有一半或四分之一的屏幕，因此屏幕宽度更小吗？我的浏览器大部分时间都没有全尺寸，无法在其他窗口等中工作。

那么，你们现在如何在 IE8 中支持基于 REM 的媒体查询？

像这里提到的https://stackoverflow.com/a/21122705/1010918 的后备方案会起作用吗？

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

我不认为这会起作用（我希望！！）所以我真的只能用条件 cmets 为 IE8 分配不同的样式表了吗？

你是这样处理的吗？我可能有哪些其他解决方案？

我已经阅读并思考了所有这些：
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

查看此视频以获取基于 REM 的设计示例。我相信这也可以用 ie8 以某种方式完成。
http://webdesign.tutsplus.com/courses/responsive-web-design-revisited/lessons/what-responsive-means-today-and-what-youll-be-building

Answer 1

IE8 也不支持媒体查询，所以并不是 polyfill 将它们关闭，只是 IE8 根本不支持它们。

Chuck 说“在启动 polyfill 时忽略 MQ 规则，因为仅在桌面上需要支持”是什么意思。那么当 polyfill 在 MQ 支持中被踢掉的时候呢？为什么 IE8 中的 MQ 支持只需要桌面？

他的意思是IE8只能在桌面上运行，所以以响应式的方式支持它是没有意义的。

难道不是有些用户没有完全打开浏览器窗口，而是只有一半或四分之一的屏幕，因此屏幕宽度更小吗？我的浏览器大部分时间都没有全尺寸，无法在其他窗口等中工作。

好的，所以也许以响应式的方式支持它是有道理的，但这对开发人员来说不是一个足够好的理由——他认为添加这种支持的额外困难将是太多的工作，以至于不值得.

他确实在票中说，如果其他人想做这项工作并提交代码更改，那么他会考虑将它们带入库，但他不会这样做。

有多少工作量？

嗯，值得再次指出的是 IE8 不支持媒体查询。因此，为了在 IE8 中获得 MQ，您需要使用另一个 polyfill 库，例如 RespondJS。

因此，使 IE8 REM 与 MQ 一起工作的工作实际上是使 REM polyfill 和 RespondJS 相互了解并协同工作——很有可能您需要对这两个库进行更改以使它完全有效。这可能很难做到。我当然可以理解他们为什么决定不打扰。

因此，就目前情况而言，我认为您将不得不接受您想做的事情在 IE8 中是不可能的。除非您想开始在 polyfill 库中进行修改以自己修复它。

Answer 2

因为我遇到了同样的问题，你实际上有一个真正的选择。不确定 2017 年会有很多人对此解决方案感兴趣，但它确实有效！

https://github.com/nbouvrette/remPolyfill