媒体查询，引导程序和css3-mediaqueries-js-媒体类型(屏幕，手持设备等)是否可选? [英] Media queries, bootstrap and css3-mediaqueries-js - is the media type (screen, handheld, etc) optional?

问题描述

我已经基于twitter的启动框架(同时进入LESS学习曲线)启动了一个新的响应式Web项目，但遇到了IE和媒体查询问题.作为IE7& 8不支持媒体查询，我获取了 css3-mediaqueries-js polyfill脚本，这样IE就会开始做出响应.它不起作用:-(

I've started a new responsive web project based on twitter's bootstrap framework (embarking on a LESS learning curve at the same time) and I've hit an issue with IE and media queries. As IE7 & 8 don't support media queries, I grabbed a copy of the css3-mediaqueries-js polyfill script so that IE would start behaving responsively. It didn't work :-(

经过大量的努力之后，我将问题范围缩小到了媒体查询语法. Bootstrap的媒体查询是:

After a lot of head-scratching I narrowed the issue down to the media query syntax. Bootstrap's media queries are:

@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和(...)表达式之间存在一种媒体类型，例如屏幕，手持设备等.例如:

Turns out these aren't parsed correctly by css3-mediaqueries-js as the script expects there to be a media type - screen, handheld, all, etc - in between the @media and the (...) expression, for example:

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

问题是，引导程序或css3-mediaqueries.js是正确的吗? W3C规范(http://www.w3.org/TR/css3-mediaqueries/#media0)说css3-mediaqueries.js是正确的，而引导程序是错误的:

The question is, which is correct, bootstrap or css3-mediaqueries.js? The W3C spec (http://www.w3.org/TR/css3-mediaqueries/#media0) says css3-mediaqueries.js is right and bootstrap is wrong:

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

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

权威性稍差的来源(Russ Weakly)则相反:

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

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

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

More importantly, this is how browsers that natively support media-queries behave.

那么哪个需要修复，引导程序或css-mediaqueries-js?

So which needs fixing, bootstrap or css-mediaqueries-js?

推荐答案

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

Similar (answered) question here: Twitter Bootstrap 320andup Implementation

我放弃了css-mediaqueries-js，转而使用 respond.js 没有媒体类型.

I've ditched css-mediaqueries-js in favour of respond.js which is happy with no media type.

尽管仍然是关于标准的问题，而不是实施的问题，但我仍然对哪种方法是正确的"仍然存有疑问.我认为媒体类型不是强制性的当前浏览器方法很可能会赢得胜利.这意味着css3-mediaqueries-js需要进行一些更新才能处理此问题.

My question about which approach is 'right' still stands though, although it's more of a standards question than an implementation question. I reckon the current browser approach of media type NOT being mandatory is likely to win the day. That would mean css3-mediaqueries-js needs some updating to handle this.

感谢克里斯蒂安·穆勒(ChristianMüller)在此方面的投入.

Thanks to Christian Müller for his input on this.

这篇关于媒体查询，引导程序和css3-mediaqueries-js-媒体类型(屏幕，手持设备等)是否可选?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！