HTML5 respond.js solves the responsive layout problem of IE6~8

Responsive layout, ideally, responsive to various PC/mobile terminals. The degree of support for media queries is IE9+ and other modern browsers, but IE8 still occupies a relatively large market share in the market, so we have to consider IE low-end browsers.

　　So how to be compatible with responsive layout in IE6~8 browsers? Here we need to use such a file: respond.js. File download address: https://github.com/scottjehl/Respond.

　　Friendly reminder to all friends, there are some points that need to be paid attention to about the use of respond.js. Once you don't pay attention, it will not be displayed in IE6-8.

1. Writing basic styles

To achieve responsive layout, you first need to write basic responsive layout styles.
Copy code
html,body {
    height: 100%;
}
@media only screen and (min-width: 480px){
    body {
        background: yellow;
    }
}
@media only screen and (min-width: 640px) and (max-width : 1024px) {
    body {
        background: green;
    }
}
@media screen and (min-width: 1024px){
    body {
        background: blue;
    }
}
Copy code
2. Plug-in principle

Next, you need to understand the implementation idea of respond.js: the
first step is to take out all the externally introduced CSS file paths in the head and store them in an array;
second Step 1, traverse the array and send AJAX requests one by one;
Step 3, after the AJAX callback, analyze the min-width and max-width syntax of the media query in the response (note that only min-width and max-width are supported), analyze The corresponding css block is corresponding to the viewport change interval;
the fourth step is to use the corresponding css block according to the current viewport when the page is initialized and window.resize.
3. Core

conclusion At this time, you can get some points to pay attention to when writing code according to the basic implementation ideas:
1. You need to start the local server (localhost), and you cannot use the ordinary local url address (beginning with file://) ;
2. The CSS file needs to be imported externally, and it is invalid to write the CSS style in the style;
3. Since the respond plugin searches for the CSS file and then processes it, the respond file must be placed after the CSS file.
4. In addition, although It can be achieved by placing the response in the head or behind the body, but it is recommended to place it in the head (the specific reasons are mentioned in the documentation tips below)
5. It is best not to set utf-8 encoding for CSS, use the default ( See the documentation tips section below for the reasons.)

4. Documentation hints Some hints

in the official documentation:
1. The sooner the respond.js file is introduced, the more likely it is to avoid the splash screen that appears under IE.
2. Nested media queries are not supported.
3. The character encoding of utf-8 affects the operation of respond.js files.
Official API original text: if CSS files are encoded in UTF-8 with Byte-Order-Mark, they will not work with Respond.js in IE7 or IE8.
The basic meaning is: the character encoding of CSS files in utf-8 format will affect the plugin.
But when I use IE6-8 for testing, it can be displayed normally (whether it is to increase the charset setting in the css file or increase the charset setting in the link tag). So, it's not too clear what this location bug means.
4. A splash screen may appear across domains (not tested yet, the details are unknown)

5. Example demo

html file part
Copy code
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title >HTML5-responsive layout--respond.js-alone ice sea</title>
    <link rel="stylesheet" href="test.css" charset="utf-8">
    <script src="respond.min.js"></script>
</head>
<body>
    <div class="wrap" id="con">
        Let IE6~8 support responsive layout-alone ice sea
    < /div>
</body>
</html>
Copy code

Note : either respond.min.js or respond.src.js can be used, just download from the download address given above. The CSS section is the top piece of code.

Display effect (the display effect of IE6, IE7-8 is also no problem, and the texture processing will not be done here):

to be studied. The content of the
official document has not been interpreted clearly (mainly it is not very clear how to apply)

<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />

<link href="/path/to/respond.

<script src="/path/to/respond.proxy.js"></script>

Other plugins that support responsive layout-css3-mediaqueries-js
There are no official documents and demos of css3-mediaqueries-js. Compared with respond.js, css3-mediaqueries-js supports almost all the syntax of media query. A splash screen will appear. It is not very recommended to use. Although it can support all mediaqueries, min-width and max-width can actually meet our needs for responsive layout.

CDN support

Considering that IE9 supports CSS3, you can directly add a script reference to the head tag of the HTML page:

HTML5 respond.js solves the responsive layout problem of IE6~8

Guess you like