2

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 Answer 1

7

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.

2
  • respond.js seems to work a bit better than css3-mediaqueries-js (+1)
    – Xavier
    Jul 2, 2012 at 13:43
  • But the author who written the respond.js says at the bottom, that css3-mediaqueries.js supports lot of features the his respond.js polyfill. Since i'm also beign new in starting the RWD development, confused of using which polyfill for the fall back versions.
    – PCA
    Feb 23, 2013 at 12:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.