基于 IE8 和 REM 的媒体查询

IE8 and REM based Media Queries

我想将我的媒体查询基于 REM 以支持所有类型的浏览器缩放 and/or base/browser 用户调整字体大小。最好是 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 支持?

难道某些用户没有将浏览器 window 完全打开,而是只打开了屏幕的二分之一或四分之一,因此屏幕宽度较小吗?大多数时候我的浏览器都没有全尺寸,无法在其他 windows 等

中工作

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

这里提到的后备方案 可行吗?

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

认为这行得通(我希望我希望!!)所以我真的只剩下用条件注释为 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

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

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?

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

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.

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

他确实在工单上说,如果其他人想做这项工作并提交代码更改,那么他会考虑将它们带入图书馆,但他不会这样做。

工作量是多少?

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

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

所以就目前情况而言,我认为您将不得不接受您想要做的事情在 IE8 中是不可能的。除非你想开始在 polyfill 库中四处乱窜,自己修复它。

自从我 运行 遇到同样的问题以来,您实际上有一个可行的选项。不确定 2017 年会有很多人对此解决方案感兴趣,但它确实有效!

https://github.com/nbouvrette/remPolyfill