Responsive Web Design and IE 9 (with code)

Below is the sample code for responsive web design:

@media screen and (min-width: 1153px) {

.title {

top: 220px;

}
}

@media screen and (max-width: 1152px) {
}

@media screen and (max-width: 640px) {
}

The number indicts the width of the device screen.  If the width is wider than 1153px, then it will execute the code in {}. If smaller than 1152, the code in @media screen and (max-width: 1152px){} will be executed. If smaller than 640px,  the code in @media screen and (max-width: 640px){} will be executed, otherwise, the code will be ignored.

But, generally IE 8 doesn’t support @media so it needs to get this file with IE comment:
<!–[if lt IE 9]><script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–>

I have used this code to make a responsive web page on IE 8 successfully.

It’s said, even with this file, IE 8 still doesn’t support “or” and “@import”.

Leave a Reply

Your email address will not be published. Required fields are marked *