2012-05-10 42 views
2

我已经开始了一个基于twitter的引导框架的新响应式web项目(同时开始使用LESS学习曲线),并且我遇到了IE和媒体查询的问题。由于IE7 & 8不支持媒体查询,我抓取了css3-mediaqueries-js polyfill脚本的副本,以便IE能够以响应方式开始行动。它没有:-(媒体查询,bootstrap和css3-mediaqueries-js - 媒体类型(屏幕,手持等)可选?

工作了很多头部划伤后,我缩小了问题,下至媒体查询语法引导的媒体查询是:

@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-mediaquerie s.js? W3C规范(http://www.w3.org/TR/css3-mediaqueries/#media0)说,CSS3,mediaqueries.js是正确的,自举是错误的:

媒体查询由媒体类型以及检查特定媒体特征的条件的零个或更多个表达式 。

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

媒体特征可以在没有媒体类型或关键字来使用。媒体 类型被假定为“全部”。 (幻灯片42)

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

那么需要修复,bootstrap或css-mediaqueries-js?

回答

7

类似(回答)的问题在这里:Twitter Bootstrap 320andup Implementation

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

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

感谢ChristianMüller对此提出的意见。

+0

[respond.js](https://github.com/scottjehl/Respond/)似乎工作比css3-mediaqueries-js(+1)更好一点 – Xavier

+0

但是撰写respond.js的作者说:最后,css3-mediaqueries.js支持他的respond.js polyfill的很多功能。由于我也是开始开发RWD开发的新手,因此在使用哪种polyfill作为回退版本时感到困惑。 – PCA