target small screens for responsive design in internet explorer 6

Question

this is something different. I need to create a web page for IE 6 using css2 and vanilla js. the problem is that I cant target smeller screens in IE6 so my design getting broken in screen smaller than 1000px.

in chrome and other modern browsers, I'm using media query and its working perfectly.

I have read about several hacks. but the CSS always apply to all the screen sizes and not to smaller ones

HTML:

 <link rel="stylesheet" href="css/main.css">
    <!--[if IE]>
        <link rel="stylesheet" href="css/ie.css" />
    <![endif]-->

ie.css:

   body {
       background: red;
   }

   @media screen and (min-width: 640px),
   screen\9 {
       body {
           background: green;
       }
   }

how can I make it change only in smaller screens

Answer 1

Quite already answered there media queries internet explorer

IE6... is old. So I would use javascript for resize event, and if the window width is smaller than 1000px, I would add a specific class to the body

Then, your CSS will be responsive by using the new class added to body, instead of media queries..

Something like

/* Standard style */
body{background: red;}
.a-class{color: black;}

/* Responsive style */
body.resp-class{background: green;}
body.resp-class .a-class{color: red;}