Solve @media screen (adaptive) IE browser incompatibility issues

1. Resolve Compatibility issues

(1) The top of the page must be defined:<! DOCTYPE html>

(2) Click: Download Respond.js file

(3) Introduce <script src= "Respond.js" ></script>;respond.js must be referenced after the style sheet:

(4) The page must be running in a server environment, and it cannot be opened directly.

2. Use CSS3 to determine the size of the window to set different styles:

As an example:

/* When width is less than 500px; background is red */

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

body{background:red;}

}

/* width between 500px-800px; background is blue */

@media screen and (min-width:500px) and (max-width:800px) {

Body{background:blue;}

}

/* When width is greater than 800px; background is green */

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

Body{background:green;}

}

Note here that the style must be a reference to the external style, directly written on the page can not

You can click: instance download, I have done and tested the instance.

Originating From: Http://www.bjishu.com/using-ie-css3htc-make-compatible-response-page

Solve @media screen (adaptive) IE browser incompatibility issues