Question

I have a simple requirement ;
Apply desktop.css for larger screen sizes AND
Apply iPad.css for somewhat smaller screen sizes

Now I want to use CSS Media Queries for these.

<link rel="stylesheet" media="only screen and (min-width: 768px)" href="css\desktop.css">
<link rel="stylesheet" media="only screen and (max-width: 768px)" href="css\ipad.css">

Now I have read that older IE does not have support for min-width. But there is a strange kind of support that I see in IE8
i.e IE8 recognizes min-width as a property, but not as a media query.

So

#example{*min-width:100px;}

works fine in IE8

But this does not

@media only screen and (min-width:100px) 

I have already tried the following for IE

<!--[if IE ]><link rel="stylesheet" media="screen" href="css\desktop.css"><![endif]-->

But I want to apply IE desktop css at a particular min-width only and NOT always..

Is there a JS workaround for this like;

<!--[if IE AND min-width:100px]><link rel...

Please let me know how I can apply 2 set of CSS in IE.

Answer 1

Media queries are only supported by IE9+.
You can use a polyfill like Respond.js for IE6-8 compatibility.