CSS3媒体查询不可用时，如何编写“响应式javascript”？

Question

我需要确保我的页面在不同的屏幕尺寸下看起来都不错。 最好的解决方案可能是CSS3媒体查询。

但是，我的目标用户群中有很大一部分仍在使用IE <=8。我计划编写一些js，以便在加载页面时根据窗口大小重新设计元素（字体大小等）的样式。 做这个的最好方式是什么？

1. 是否有解决此问题的现有解决方案（git repo）？
2. 我应该使用：
   • IE <8的javascript +其他浏览器的媒体查询，或
   • 每个浏览器的javascript代码？

Answer 1

结合使用react.js和Modernizr来加载它是一个非常简单的解决方案。 使用Modernizr时，您无需为大多数Internet（现代浏览器）提供poyfill，只需为旧版本加载它即可。 例：

Modernizr.load({
  test: Modernizr.mq('only all'),
  nope: ['respond.js']
});

基本上，response.js所做的就是添加对旧浏览器的媒体查询的支持，因此您可以编写响应式CSS，它将在旧IE上“正常工作”。

Answer 2

您可能还想看看这个jquery响应式插件 。 它是一个非常轻量级的插件，可以管理所有浏览器上的整个重排问题，从而使您编写的CSS少得多。