How to use respond.js to solve the responsive layout of IE6~8-JS Tutorial-php.cn

How to use respond.js to solve the responsive layout of IE6~8

一个新手

Release： 2017-09-07 09:54:38

Original

1268 people have browsed it

　Responsive layout, ideally, responds to various PC/mobile terminals. Media queries are supported by 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 make responsive layout compatible with 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 things that need to be paid attention to when using respond.js. If you don’t pay attention, it will not be displayed in IE6-8.

Write basic styles

To implement 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 after login

Plug-in principle

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

Core conclusion

At this point, based on the basic implementation ideas, you can get some things to pay attention to when writing code:
1. You need to start the local server (localhost), and you cannot use the ordinary local URL address (starting with file://);
2. CSS files need to be imported externally, and writing CSS styles in style is invalid;
3. Since the respond plug-in searches for CSS files and then processes them, the respond file must be placed after the CSS file
4. In addition, although it can be achieved by placing respond in the head or behind the body, it is recommended to place it in the head (the specific reasons are mentioned in the document tips below)
5. It is best not to set the utf-8 encoding for CSS and use the default (see the document tips section below for details)

Document Tips

Some tips in the official documents:
1. The sooner you introduce the respond.js file, the more likely you are to avoid the splash screen that appears under IE.
2. Nested media queries are not supported
3. The character encoding of utf-8 has an impact on the operation of respond.js file
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 plug-in.
But when I use IE6-8 for testing, it can be displayed normally (whether adding charset settings in the css file or adding charset settings in the link tag). Therefore, it is not too clear what the meaning of this location bug is.
4. A splash screen may appear across domains (it has not been tested yet, and the specific situation is unknown)

Instance demo

<!doctype html>
    <html>
        <head>
        <meta charset="UTF-8">
        <title>HTML5-响应式布局--respond.js-独行冰海</title>
        <link rel="stylesheet" href="test.css" charset="utf-8">
        <script src="respond.min.js"></script>
</head>
    <body>
        <p class="wrap" id="con">        
        让IE6~8支持响应式布局</p>
    </body>
</html>

Copy after login

Note: respond.min Either .js or respond.src.js can be used, just download it from the download address given above. The CSS part is the top piece of code.
Display effect (the display effect of IE6 and IE7-8 is also no problem, and we will not deal with the mapping here):

To be studied
The official document has not yet clearly interpreted the content (mainly It’s not clear how to apply)

<!-- Respond.js proxy on external server -->
<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js">
</script>

Copy after login

Other plug-ins that support responsive layout-css3-mediaqueries-js
css3-mediaqueries-js There are no official documents or demos, compared to respond.js css3-mediaqueries -js supports almost all media query syntax. A splash screen will appear. It is not recommended to use it. 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 in the head tag of the HTML page:

The above is the detailed content of How to use respond.js to solve the responsive layout of IE6~8. For more information, please follow other related articles on the PHP Chinese website!