@media and IE8 and below

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%;
        }
}
Advertisements
This entry was posted in HTML, Web and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s