twitter-bootstrap - 媒体查询、 Bootstrap 和 css3-mediaqueries-js - 媒体类型(屏幕、手持设备等)是否可选？

Question

我已经开始了一个基于 Twitter Bootstrap 框架的新响应式 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

原来这些没有被 css3-mediaqueries-js 正确解析，因为脚本期望在 @media 和(...) 表达式，例如:

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

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

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.

A slightly less authoritative source (Russ Weakly)相反的说法:

A media feature can be used without a media type or keyword. The media type is assumed to be "all". (slide 42)

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

那么哪个需要修复、 Bootstrap 或 css-mediaqueries-js？

Answer 1

此处类似(已回答)问题:Twitter Bootstrap 320andup Implementation

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

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

感谢 Christian Müller 对此的贡献。