Respons.js IE6-8 CSS 3 Media Query 지원

다음으로 전송:http://caibaojian.com/respondjs.html
Bootstrap 에 이 js 파일 이 도입 되 었 습 니 다.이름 에서 알 수 있 듯 이 자가 적응 호 환 입 니 다.IE 를 열 어 보 니 효과 가 좋 고 적응 효과 가 좋 습 니 다.Respons.js 는 CSS 3 Media Query 를 지원 하지 않 는 브 라 우 저 에 IE6-IE8 등 다른 브 라 우 저 를 포함 하여 조 회 를 지원 하도록 합 니 다.
사용 방식
공식 데모 주소:http://scottjehl.github.com/Respond/test/test.html
1.css 에서 min/max-width media queries 를 정상적으로 사용 합 니 다.

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

2.respond.min.js 를 도입 하지만 css 뒤에 있어 야 합 니 다.(일찍 도입 할 수록 좋 습 니 다.ie 아래 에서 페이지 플 래 쉬 화면 을 볼 확률 이 낮 습 니 다.처음에 css 가 먼저 렌 더 링 을 하기 때 문 입 니 다.respond.js 가 뒤에 불 러 오 면 media query 에 따라 분 석 된 css 가 페이지 의 레이아웃 을 다시 바 꾸 기 때문에 플 래 쉬 화면 현상 이 나타 납 니 다)
사고의 방향 을 실현 하 다.

1.head 의 모든 css 경 로 를 꺼 내 배열 에 넣 기

2.그리고 배열 을 옮 겨 다 니 며 ajax 요청 을 하나씩 보 냅 니 다.

3.ajax 리 셋 후 response 의 media query 의 min-width 와 max-width 문법 만 분석 하여 view port 변화 구간 에 해당 하 는 css 블록 을 분석 합 니 다.

4.페이지 초기 화 시 window.resize 시 현재 viewport 에 따라 해당 하 는 css 블록 을 사용 합 니 다.

//      media query,  css           ，         css       ，       。
window.matchMedia = window.matchMedia || (function(doc, undefined){
  var bool,
      docElem  = doc.documentElement,
      refNode  = docElem.firstElementChild || docElem.firstChild,
      // fakeBody required for 
      fakeBody = doc.createElement('body'),
      div      = doc.createElement('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   ，     selectivizr respond.js  ，http://selectivizr.com/tests/respond/
                //selectivizr     CSS3 selectors for IE；    csstext  styleSheet link      rawCssText ；      selectivizr    ajax  
        translate( sheet.styleSheet.rawCssText, href, media );
        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
            } );
        }
    }
}
.......

 
            ajax   translate media query max-width min-width    ；          ajax  css      css    mediaquery   ， ajax          ；             cdn ，respond.js        ，       。 
      		
// cross-domain/respond-proxy.html   cdn 
// cross-domain/respond.proxy.gif          







  
       ajax                css，   window.name    ；  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。  
                ，           css    ，           js   css          500ms-515ms  （         ），ie8         
           ，            （    demo  ，           ，    css  ，  js        media query   viewport       red   ，       ），     500ms  。        ，      ajax               ，500ms         。 
          ajax  css,                 ，    css     ，  ajax            ，    fiddler                  ：

Respons.js IE6-8 CSS 3 Media Query 지원

respond.js

좋은 웹페이지 즐겨찾기