Media queries and IE

Mobile
1

Hi all,

I’m just getting into responsive design and am struggling with IE (I assume this is a common problem).

If any of you fine people could take a look at http://rich.me.uk and:

  • Let me know why it’s not working in IE6-8 - I’m using respond.src.js
  • See if I can optimise the CSS - can I minimize it?
  • Have I done anything else wrong?

Any advice would be much appreciated.

Many thanks

2

To use media queries without breaking the page in old versions of IE you need to specify a stylesheet without media queries first in your page. The stylesheets using media queries can then follow it overriding the styles as required. Old versions of IE can then use the styles in the first stylesheet and will ignore the following ones that they don’t understand.

Unfortunately this means that you end up deliering a lot of additional styles to mobile devices that are subsequently overridden where it would be more efficient to provide the mobile styles first (but that would break the old versions of IE).

3

Isn’t there a way around this Stephen?