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”.