So this week I have been working on creating an adaptive UI for the various screen resolutions that our users operate on.  Currently the page was static and looked horrible on high resolution screens.

Playing around with HTML/JS Windows 8 and MVC 4 applications I got the idea of just using @media with a min and max range. On IE 9, 10, Chrome, and Firefox everything looked super.  Then I got the test case of ensuring it also worked on IE 7 and 8.  I Cringed, adding support for older browsers can be troublesome at the very least.

IE 8 and below does not support a CSS setting for min and max on the width.  Which completely blew my design out of the water.

Luckily I found a solution by Scott Jehl on github.  The project is called respond. Its goal is to enable browsers to utilize CSS3 media queries that normally do not. 

It is very easy to turn the feature on. 

• Download it from the link above
• Add it to your project folder
• Add a link to the file in the header of our page.

  <script src="../js/respond.min.js"></script>

• You can now freely use the @media query in your pages for IE 7 and 8.

Example:

@media screen and (min-width: 600px) and (max-width: 1024px) {
        .PanelsLeft {
            width: 40%;
        }

        .PanelsRight {
            width: 60%;
        }
}