javascript - 基于 IE8 和 REM 的媒体查询

标签 javascript css internet-explorer-8 media-queries fallback

我想将我的媒体查询基于 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) { ?

认为这行得通(我希望我希望!!)所以我真的只能用条件注释为 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 库中四处乱砍来自己修复它。

关于javascript - 基于 IE8 和 REM 的媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33054882/

相关文章:

javascript - WooCommerce 单个产品图像悬停缩放闪烁

html - 尝试在页面中心创建 4 个响应式相等框

javascript - IE8 或更低版本中的 Google Webfonts (Loader)

javascript - jQuery DatePicker 不显示

javascript - tinyMCE 剥离 "class"-attribute,尽管它在 extended_valid_elements

html - 使用 CSS 打印时,内容总是与固定的页眉和页脚重叠

html - 对齐图像的正确 CSS 是什么?

javascript - 各种 calc() polyfill 库在 IE8 中不起作用

JavaScript "Access is Denied"错误 - 没有 iframe

javascript - foreach 循环等待直到每个步骤中的每个函数完成