Respond.js let ie6-8 support CSS3 Media Query

Bootstrap inside the introduction of this JS file, from the name to see is adaptive compatibility. Open IE looked a bit, the effect is very good, adaptive effect is very good. Respond.js lets browsers that do not support CSS3 Media query include IE6-IE8 and other browser support queries.

How to use the official demo address: http://scottjehl.github.com/Respond/test/test.html
1. Normal use of Min/max-width media queries in CSS

    @media screen and (min-width: 480px){        ...styles for 480px and up go here    }

2. Introduction of Respond.min.js, but in the back of the CSS (the earlier the better, the lower the probability of seeing the page splash screen under IE, because the first CSS will be rendered first, if the respond.js is loaded back, then re-based media Query parsing CSS will change the layout of the page again, so it looks like a splash screen phenomenon)

Implementation ideas

• 1. Remove all the CSS paths from the head <link rel= "Sheetstyle" href= "xx"/> into the array
• 2. Then iterate through the array by sending AJAX requests
• 3. The Ajax callback only analyzes the Min-width and max-width syntax of media query in response, and analyzes the viewport variation interval corresponding to the corresponding CSS block
• 4. When the page is initialized and window.resize, the corresponding CSS block is used according to the current viewport.

 //Detect if Media query is supported, the method to detect whether CSS is valid is similar, create an element after applying the CSS to detect the width of the element, and then clear the element. Window.matchmedia = Window.matchmedia | | (function (doc, undefined) {var bool, Docelem = doc.documentelement, Refnode = Docelem.firstelementchild | | do Celem.firstchild,//fakebody required for fakebody = doc.createelement (' body '), div = Doc.createelem  Ent (' div ');  div.id = ' mq-test-1 ';  Div.style.cssText = "Position:absolute;top:-100em";  FakeBody.style.background = "None";  Fakebody.appendchild (DIV);    return function (q) {div.innerhtml = ';    Docelem.insertbefore (Fakebody, Refnode);    bool = Div.offsetwidth = = 42;    Docelem.removechild (Fakebody);  return {matches:bool, media:q}; };}) (document);  

  ... if (!!    href && iscss &&!parsedsheets[href]) {//SELECTIVIZR exposes CSS through the Rawcsstext expando if (Sheet.stylesheet && sheet.styleSheet.rawCssText) {//sheet.stylesheet.rawcsstext can not understand, it is convenient select Ivizr and Respond.js, http://selectivizr.com/tests/respond///selectivizr role is CSS3 selectors for IE, the Convention will be the original Csstex T put on the extended attribute Rawcsstext on StyleSheet link, here if the SELECTIVIZR can be used less AJAX request translate (sheet.styleSheet.rawCssText, href, medi        a);    parsedsheets[href] = true; } else {if ((!/^ ([a-za-z:]*//)/.test (href) &&!base) | | href.replace (REGEXP.$1, ""). Split (            "/") [0] = = = Win.location.host) {Requestqueue.push ({href:href, Media:media        } ); }    }}.......

The rest of the code is the AJAX implementation and translate media query Max-width min-width logic, you can see that this must rely on AJAX request CSS path to get the content of Mediaquery in the CSS file, That Ajax cross-domain problem is to be solved, because our static resources are to put CDN, Respond.js also gives a cross-domain approach, that is, the introduction of proxy pages.

//把cross-domain/respond-proxy.html 放到cdn上//把cross-domain/respond.proxy.gif 放到当前域服务器上<!-- 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>

Here the Ajax cross-domain implementation is through the proxy page will get to the CSS, and then through the window.name communication implementation, such as in Respond.proxy.js

function checkFrameName() {    var cssText;    try {        cssText = iframe.contentWindow.name;                var now = new Date().getTime(),useTime = now - initTime;        alert(‘获取css耗时:‘+ useTime + ‘ms‘);    }    catch (e) { }    if (cssText) {        ……//销毁之前用于通信的iframe,后续回调callback        callback(cssText);    }    else{        win.setTimeout(checkFrameName, 100);    }}win.setTimeout(checkFrameName, 500);//500ms后确认内部iframe的name值是否传递过来，后续再更新当前viewport该用的css。

Because of the problem of implementing cross-domain proxy, it takes a long time to initialize the page when all the CSS is applied, and the following light test starts from the time it takes to execute the JS file to the CSS retrieval call, 500ms-515ms (each refresh result is different), IE8 test results are as follows

Test results found that after refreshing the page will have a clear splash screen (for the test demo, for example, the first page background is black, which is the default CSS, cross-domain JS after the completion of the analysis of the viewport size in media query should apply red background, so it becomes red), The interval time is above 500ms. So the experience is not very good, and the scene in the Ajax cross-domain is not a better way to implement, 500ms interval of the splash screen can not be avoided.

At the same time, because it is AJAX request CSS, it will be due to the response of the additional request, fortunately, the CSS request once again, this time the AJAX request is read in the browser cache, such as Fiddler in the detection results of the third request and the sixth request:

• Advantages: Only 1k after compression, no cross-domain performance OK, just introduce respond.js universal use
• Cons: Support for media query only Min-width and max-width (for responsive use), cross-domain support, although the configuration is a bit cumbersome to achieve high cross-domain cost and a splash screen experience is poor.

Respond.js let ie6-8 support CSS3 Media Query