Respond.js plug-in implementation principleNext Need to understand the implementation of the idea of Respond.js: The first step, the head of all the external introduction of the CSS file path to be stored in an array; the second step is to iterate through the array and send an AJAX request; The third step, after the Ajax callback, analyzes the media in response The Min-width and max-width syntax of query (note that only supports min-width and max-width), the viewport change interval corresponding to the corresponding CSS block is analyzed; fourth step, When the page is initialized and window.resize, the corresponding CSS block is used according to the current viewport.
Core ConclusionsSo at this point, you can base on the implementation of ideas, to get some writing code to pay attention to the place: 1, the need to start the local server (localhost), can not use the ordinary local URL address (file://), 2, the need for external introduction of CSS files, It is not valid to write CSS style in style; 3, because the respond plugin is to find CSS files, and then processing, so respond file must be placed in the back of the CSS file 4, in addition, although the respond placed in the head or behind the body can be achieved , but is recommended to be placed in the head (for specific reasons mentioned in the following document hint) 5, it is best not to set the Utf-8 encoding for CSS, use the default (for reasons described in the following Document Tips section)
Documentation TipsSome tips in the official documentation: 1, the earlier the introduction of respond.js files, the more likely to avoid the flash screen under IE. 2, do not support nested media query 3, utf-8 character encoding on the operation of the Respond.js file has an impact on the official API original: If CSS files is encoded in UTF-8 with Byte-order-mark, they would not W Ork with Respond.js in IE7 or IE8. The basic meaning is: the utf-8 format of the CSS file character encoding will affect the plug-in. But when I use ie6-8 for testing, I can display it normally (either by adding the CharSet setting in the CSS file or by adding the CharSet setting in the Link tab). Therefore, it is not too clear the meaning of this location bug. 4, cross-domain may appear splash screen (not tested, the situation is unknown)
CSS3 @media support IE8 to solve Ie6~8 's responsive layout problems with Respond.js
