56

我使用 twitter bootstrap 开发了一个站点，似乎响应式布局部分在 IE8 及以下的所有 IE 浏览器中都被破坏了。这些浏览器不支持吗？

4

6 回答 6

52

如果你想有更好的性能并且你的结构不是太复杂。

你可以试试Respond.JS

来自作者：

这不是唯一的 CSS3 媒体查询 polyfill 脚本。但这该死的可能是最快的。

如果您正在寻找更强大的 CSS3 媒体查询支持，您可以查看http://code.google.com/p/css3-mediaqueries-js/。在测试中，我发现该脚本在渲染复杂的响应式设计（文件大小和性能方面）时明显变慢，但它确实支持比该脚本更多的媒体查询功能。给作者的大礼帽！:)

于 2012-08-03T20:13:40.793 回答
33

要在 IE 8 及更低版本中支持@media查询，请查看
css3-mediaqueries-js。

Wouter van der Graaf的css3-mediaqueries.js是一个 JavaScript 库，可以让 IE 5+、Firefox 1+ 和 Safari 2 透明地解析、测试和应用 CSS3 媒体查询。Firefox 3.5+、Opera 7+、Safari 3+ 和 Chrome 已经提供原生支持。

PS：我使用Twitter Bootstrap和这个插件，效果很棒！希望这可以帮助！:)

于 2012-06-12T15:32:59.910 回答
2

这些是我为使其工作而采取的步骤：

看看 IE8 中的 response.js 演示页面：
https ://rawgithub.com/scottjehl/Respond/master/test/test.html

它可以通过将 response.js 下载到您的供应商/资产或类似的地方来在本地工作。

禁用您的本地引导程序并在您的 css 中尝试此操作：

/*styles for 800px and up @ 16px!*/
@media screen and (min-width: 50em){
  body {
    background: blue;
  }
}

有用！

因为我使用的是cdn，所以我需要在本地下载并托管它：http:
//getbootstrap.com/getting-started/#download

所以，它适用于这些：

= stylesheet_link_tag 'bootstrap.min.css'
= stylesheet_link_tag 'bootstrap-theme.min.css'
= stylesheet_link_tag 'my-css'
= javascript_include_tag 'respond.min'

您还需要摆脱任何 @import 声明。

于 2014-02-04T06:56:21.483 回答
0

我已经尝试了上述所有方法，并且效果很好，但是速度很慢。我提供下一种方法。我们应该分解包含 @media 的 css 文件并将每个规则插入到单独的文件中。然后我们应该根据浏览器屏幕宽度有条件地上传每个文件。所有这些操作都将执行脚本 cload.js。下载 cload.js 并阅读如何使用它，你可以 在这里

于 2013-02-10T08:51:24.467 回答
0

你们都应该阅读这个论坛帖子。

它非常清楚地解释了 IE 和 Twitter Bootstrap 之间的挑战。它还为您提供实际可行的解决方案。

引用：

这里的问题是，在像http://twitter.github.com/bootstrap/这样的官方页面上， 它声称可以在所有浏览器中运行，甚至是 IE7。理论上可以，但是在进行响应式开发时，您必须围绕某种思维框架进行设计和开发。

于 2013-02-20T10:30:22.740 回答
-1

我在以下位置使用了 html5shiv：

https://code.google.com/p/html5shiv/

这对我有用。它也可以使用凉亭。

于 2014-01-13T16:55:51.657 回答