媒体查询,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是错误的:

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

一个稍微不那么权威的消息来源(Russ Weakly)反过来说:

可以在没有媒体类型或关键字的情况下使用媒体功能.媒体类型被假定为"全部".(幻灯片42)

更重要的是,这就是本机支持媒体查询的浏览器的行为方式.

那么哪个需要修复,引导或css-mediaqueries-js？

Answer 1

类似(回答)的问题:Twitter Bootstrap 320andup实现

我已经抛弃CSS-mediaqueries-JS赞成respond.js这是幸福的,没有媒体类型.

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

感谢ChristianMüller对此的投入.