2

我已经开始了一个基于 twitter 引导框架的新响应式 Web 项目（同时开始了 LESS 学习曲线），并且遇到了 IE 和媒体查询的问题。由于 IE7 和 8 不支持媒体查询，我获取了一份css3-mediaqueries-js polyfill脚本的副本，以便 IE 开始响应。它没有用:-(

经过一番摸索后，我将问题缩小到媒体查询语法。Bootstrap 的媒体查询是：

@media (max-width: 480px) { ... }                         // Landscape phones and down
@media (max-width: 767px) { ... }                         // Landscape phone to portrait tablet
@media (min-width: 768px) and (max-width: 979px) { ... }  // Portrait tablet to landscape and desktop
@media (min-width: 1200px) { ... }                        // Large desktop

@media事实证明，css3-mediaqueries-js 无法正确解析这些内容，因为脚本期望在和表达式之间存在媒体类型 - 屏幕、手持设备、全部等(...)，例如：

@media all and (max-width: 480px) { ... }

问题是，哪个是正确的，bootstrap 还是 css3-mediaqueries.js？W3C 规范 (http://www.w3.org/TR/css3-mediaqueries/#media0) 说 css3-mediaqueries.js 是正确的，而 bootstrap 是错误的：

媒体查询由媒体类型和零个或多个检查特定媒体功能条件的表达式组成。

一个稍微不那么权威的消息来源（Russ Weakly）则相反：

可以在没有媒体类型或关键字的情况下使用媒体功能。媒体类型假定为“全部”。（幻灯片 42）

更重要的是，这就是原生支持媒体查询的浏览器的行为方式。

那么哪个需要修复，bootstrap 还是 css-mediaqueries-js？

4

1 回答 1

7

类似（已回答）的问题：Twitter Bootstrap 320andup Implementation

我放弃了 css-mediaqueries-js 转而使用对没有媒体类型感到满意的respond.js 。

我关于哪种方法“正确”的问题仍然存在，尽管它更多的是标准问题而不是实施问题。我认为当前非强制性媒体类型的浏览器方法可能会赢得胜利。这意味着 css3-mediaqueries-js 需要一些更新来处理这个问题。

感谢 Christian Müller 对此的投入。

于 2012-05-24T14:28:10.760 回答