Twitter Bootstrap 320andup 实现答案

【问题标题】：Twitter Bootstrap 320andup ImplementationTwitter Bootstrap 320andup 实现
【发布时间】：2013-09-26 22:12:06
【问题描述】：

我正在使用Twitter Bootstrap 创建一个站点，但我发现媒体查询不适用于 IE9 以下的任何设备（不幸的是我的目标浏览器）。这认为我使用引导程序（用于响应式缩放网格）的全部原因非常无用。

我正在考虑在引导程序中实现Andy Clarke's 320 and up 响应式样板，以便在 IE 方面获得更好的整体支持。（或类似的样板）

有没有人在网上或 Github 上遇到过这样的例子？（没有像 SASS、HAML 等或专门为 CMS 创建的）。我有一个想法，我将如何去做，但我不确定这是否是浪费时间，我想看看这两个工具是否可以成功地结合在一起。

【问题讨论】：

媒体查询are supported by IE9，究竟是什么不适合你？
嗨@AndresIlich - 是的，IE9 很好。 IE7 & 8 是问题:)
IE7 和 8 不支持媒体查询，但我想我现在知道你的问题了。

标签： css twitter-bootstrap responsive-design

【解决方案1】：

@fitzilla...我不知道如何添加额外的 cmets，所以我希望你能找到这个。我刚刚在 IE7 和 IE8 模式下检查了my website 并且都可以工作。在初始页面上查看源代码 - 您将看到针对 IE7 和 IE8 的额外 hack...

<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

然后对照我的检查您的包含，看看它们是否匹配。我相信引导响应必须在常规引导 css 文件之后。

【讨论】：

嘿@gfw - 是的，我也包含了HTML5 shim。我遇到了麻烦，因为我不知何故最终使用了几个不同版本的 response.js 文件......我使用了你拥有的那个，它突然决定工作。好东西，再次感谢！

【解决方案2】：

为了使媒体查询在旧版浏览器（IE7 和 8）中正常运行，您需要在文档正文中包含诸如 respond.js 之类的 polyfill 以支持这些技术。刚刚注意到 320andup 框架使用相同的 polyfill，因此您可以轻松地将其包含在您的引导项目中。

这是一个测试页面，您可以使用它来测试 IE7 和 8 上的查询：

http://chrisjacob.github.com/Respond/

【讨论】：

干杯@AndresIlich，我知道respond.js，我不确定在我的代码中简单实现它是否足够。我假设您必须进行另一种类型的媒体查询。
@fitzilla 是的，我误解了你的问题，以为你的意思只是 IE9，但 IE8 及以下不支持媒体查询。

【解决方案3】：

Respond.js 将使 Bootstrap 能够在 IE7 和 IE8 上运行 - 至少使用 IE9 的开发人员工具 (F12)。在我的测试站点上（http://ReactiveWebDesign.Net 我在 jQuery 之前包含了respond.js...第一个包含的 .js 文件

【讨论】：

谢谢@Gfw。干得好。只是出于好奇，您为什么将您的网站分成这么多单独的样式表？这肯定会影响加载时间吗？还是这与媒体查询有关？您是否为每种分辨率使用不同的样式表？
该网站正在进行中，所以我还没有开始合并。 2 个引导 css 文件可能可以组合起来，三个站点特定的 Site.css 、 mainNavWrapper.css 和 leftNavWrapper.css 也可以组合在一起。在站点真正完成之前，它只会让它们更容易分开。最后 3 个甚至没有被最小化，但最终会被最小化。唯一使用的其他媒体查询是将菜单转换为移动设备的选择语句。
嘿@Gfw，我已经尝试将respond.src.js 添加到文件中，并且我已经将它包含在jquery 工具之前。当我在 IE8 中查看时，网站的布局仍然是固定的。有什么想法我可能做错了吗？