How to make compatible responsive web design

Jul 03, 2013, by admin

Hi to all hope you all had a nice weekend now in this post we are going to see how to make a compatible responsive web design in all browser including internet explorer 7&8

Step 1

Add the below codes in the head tag:

meta name=”viewport” content=”width=device-width, initial-scale=1.0″

For ie7 and ie8

script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”

script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”

Step 2

Go to the css file

For 240px:
Add the below codes
@media only screen and (min-width: 240px) and (max-width:320px) {
}
For 320px:
Add the below codes
@media only screen and (min-width: 320px) and (max-width:480px) {

}
For 480px:
Add the below codes
@media only screen and (min-width: 480px) and (max-width:760px) {

}
For 760px:
Add the below codes
@media only screen and (min-width: 768px) and (max-width: 980px) {
}

Add the css codes for your dimensions under media queries in your css file.