媒体查询,引导和css3-mediaquery-js - 是可选的媒体类型(屏幕,手持等)



我已经启动了一个基于Twitter的引导框架的新响应式Web项目(同时开始了一个LESS学习曲线(,我遇到了IE和媒体查询的问题。由于IE7和8不支持媒体查询,我获取了css3-mediaquery-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-mediaquery-js 没有正确解析这些,因为脚本期望在@media(...)表达式之间有一种媒体类型——屏幕、手持式、所有媒体等,例如:

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

问题是,引导和 css3-mediaquery.js哪个是正确的?W3C规范(http://www.w3.org/TR/css3-mediaqueries/#media0(说css3-mediaquery.js是正确的,引导是错误的:

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

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

媒体

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

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

那么哪个需要修复,引导或css-mediaquery-js?

类似的(已回答的(问题在这里: Twitter Bootstrap 320andup 实现

我已经放弃了css-mediaquery-js,转而使用响应.js它对没有媒体类型感到满意。

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

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

最新更新