问题
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 :-(
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
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) { ... }
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.
A slightly less authoritative source (Russ Weakly) says the opposite:
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.
So which needs fixing, bootstrap or css-mediaqueries-js?
回答1:
Similar (answered) question here: Twitter Bootstrap 320andup Implementation
I've ditched css-mediaqueries-js in favour of respond.js which is happy with no media type.
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.
Thanks to Christian Müller for his input on this.
来源：https://stackoverflow.com/questions/10542823/media-queries-bootstrap-and-css3-mediaqueries-js-is-the-media-type-screen-h