Respond
1.4.2
저작권 2011: Scott Jehl, scottjehl.com
MIT 라이센스에 따라 라이센스가 부여되었습니다.
이 스크립트의 목표는 CSS3 미디어 쿼리를 지원하지 않는 브라우저(특히 Internet Explorer 8 이하)에서 반응형 웹 디자인을 가능하게 하는 빠르고 가벼운(3kb 축소/1kb gzip) 스크립트를 제공하는 것입니다. 이는 지원되지 않는 다른 브라우저에 대한 지원도 패치할 수 있도록 작성되었습니다(자세한 내용은 곧 제공됩니다).
반응형 웹 디자인과 관련된 개념에 익숙하지 않다면 여기와 여기에서 읽어보세요.
데모 페이지(미디어 쿼리가 작동하고 있음을 보여주기 위해 색상이 변경됨)
@media screen and ( min-width : 480 px ){
/** ...styles for 480px and up go here **/
}모든 CSS 이후에 response.min.js 스크립트(최소 1kb/gzipped)를 참조하십시오. (빠르게 실행할수록 IE 사용자가 미디어에 포함되지 않은 콘텐츠를 보지 못할 가능성이 커집니다.)
Internet Explorer를 열고 기쁨으로 주먹을 치십시오.
Respond.js는 AJAX를 통해 CSS의 원본 사본을 요청하여 작동하므로 CDN(또는 하위 도메인)에서 스타일시트를 호스팅하는 경우 이전 IE 브라우저용 CSS를 요청하려면 로컬 프록시를 설정해야 합니다. 이전 버전에서는 더 이상 사용되지 않는 x 도메인 접근 방식을 권장했지만, 도메인 간 제한 사항을 해결하려고 시도하는 것보다 성능 및 보안상의 이유로 로컬 프록시가 더 좋습니다.
명심해야 할 몇 가지 참고 사항:
이 스크립트의 초점은 의도적으로 매우 좁습니다. 최소 너비 및 최대 너비 미디어 쿼리와 모든 미디어 유형(화면, 인쇄 등)만 지원되지 않는 브라우저로 변환됩니다. 파일 크기, 유지 관리 및 성능을 단순하게 유지하고 싶었기 때문에 (모바일 우선) 반응형 디자인을 구축하는 데 필수적인 쿼리에 대한 지원을 의도적으로 제한했습니다. 앞으로는 추가 미디어 쿼리 기능을 패치하기 위한 후크를 포함하기 위해 약간의 재작업을 할 수도 있습니다. 계속 지켜봐 주시기 바랍니다!
CSS3 미디어 쿼리를 기본적으로 지원하는 브라우저는 이 스크립트를 가능한 한 빨리 실행하지 않도록 선택되어 있습니다. 지원 테스트에서 다른 모든 브라우저는 스크립트 실행을 진행하기 전에 미디어 쿼리를 지원하는지 여부를 확인하기 위한 빠른 테스트를 거칩니다. 이 테스트는 이제 상단에 별도로 포함되어 있으며 https://github.com/paulirish/matchMedia.js에 있는 window.matchMedia 폴리필을 사용합니다. Modernizr 등을 통해 이미 이 폴리필을 포함하고 있다면 해당 부분을 자유롭게 제거하세요.
이 스크립트는 다른 스크립트나 프레임워크(포함된 matchMedia 폴리필 제외)에 의존하지 않으며 모바일 제공에 최적화되어 있습니다(최대 1kb 총 파일 크기/gzip)
짐작할 수 있듯이 이 구현은 CSS 구문 분석 규칙과 관련하여 매우 멍청합니다. 매우 빠르게 실행될 수 있기 때문에 이것은 좋은 일이지만, 느슨해지면 예상치 못한 동작이 발생할 수도 있습니다. 예를 들어, 규칙을 비활성화하려는 의도로 전체 미디어 쿼리를 댓글에 포함하면 해당 규칙이 미디어 쿼리를 지원하지 않는 브라우저에서도 활성화되는 것을 발견하게 될 것입니다.
Respond.js는 @import를 통해 참조된 CSS를 구문 분석하지 않으며 스타일 요소 내의 미디어 쿼리와도 작동하지 않습니다. 해당 스타일은 구문 분석을 위해 다시 요청할 수 없기 때문입니다.
보안 제한으로 인해 일부 브라우저에서는 이 스크립트가 file:// URL에서 작동하는 것을 허용하지 않을 수 있습니다(xmlHttpRequest를 사용하기 때문). 웹 서버에서 실행하십시오.
MQ 특정 스타일을 포함하는 CSS 파일에 대한 요청이 리디렉션 뒤에 있는 경우 Respond.js는 자동으로 실패합니다. CSS 파일은 200 상태로 응답해야 합니다.
현재 링크 요소의 미디어 속성이 지원되지만 링크된 스타일시트에 미디어 쿼리가 없는 경우에만 지원됩니다. 쿼리가 포함된 경우 미디어 속성은 무시되고 내부 쿼리는 정상적으로 구문 분석됩니다. 즉, CSS의 @media 문이 우선순위를 갖습니다.
보고에 따르면 CSS 파일이 BOM(Byte-Order-Mark)을 사용하여 UTF-8로 인코딩된 경우 IE7 또는 IE8의 Respond.js에서 작동하지 않습니다. 이슈 #97에서 언급됨
경고: 미디어 쿼리 내에 @font-face 규칙을 포함하면 IE7 및 IE8이 로드 중에 중단됩니다. 이 문제를 해결하려면 @font-face 규칙을 다른 미디어 쿼리의 형제처럼 공개적으로 배치하세요.
참조된 스타일시트가 32개가 넘으면 IE에서는 Invalid procedure call or argument 오류가 발생합니다. CSS를 연결하면 문제가 사라질 것입니다.
Sass/SCSS 소스 맵은 지원되지 않습니다. @media -sass-debug-info response.js를 중단시킵니다. 이슈 #148에서 언급됨
Internet Explorer 9는 CSS3 미디어 쿼리를 지원하지만 미디어 쿼리가 포함된 CSS가 외부 파일에 있는 경우 프레임 내에서는 지원하지 않습니다(이는 IE9의 버그인 것으로 보입니다. https://stackoverflow.com/questions/10316247/media-queries 참조). -실패-내부-ie9-iframe). 이 문제가 있는 경우 수정하려면 이 커밋을 참조하세요. https://github.com/NewSignature/Respond/commit/1c86c66075f0a2099451eb426702fc3540d2e603
중첩된 미디어 쿼리는 지원되지 않습니다.
기본적으로 스크립트는 페이지에서 참조된 CSS를 반복하고 해당 내용에 대해 정규식을 실행하여 미디어 쿼리 및 관련 CSS 블록을 찾습니다. Internet Explorer에서는 스타일시트의 콘텐츠를 사전 구문 분석된 상태(IE 8에서는 미디어 쿼리가 텍스트에서 제거됨을 의미함)에서 검색하는 것이 불가능하므로 Respond.js는 Ajax를 사용하여 CSS 파일을 다시 요청하고 거기에서 텍스트 응답을 구문 분석합니다. 이 재요청이 실제로 서버로 이동하지 않고 대신 브라우저 캐시에 도달하도록 CSS 파일의 캐싱을 올바르게 구성하십시오.
거기에서 각 미디어 쿼리 블록은 스타일 요소를 통해 순서대로 헤드에 추가되고 해당 스타일 요소는 최소/최대 너비가 브라우저 너비와 어떻게 비교되는지에 따라 활성화 및 비활성화됩니다(읽기: DOM에서 추가 및 제거). 스타일 요소의 미디어 속성은 CSS의 쿼리 속성과 일치하므로 "스크린", "프로젝터" 또는 원하는 무엇이든 될 수 있습니다. CSS에 포함된 모든 상대 경로에는 스타일시트의 href가 앞에 붙으므로 이미지 경로는 적절한 대상으로 연결됩니다.
물론이죠. 몇 명:
이것은 유일한 CSS3 미디어 쿼리 폴리필 스크립트가 아닙니다. 하지만 그게 가장 빠를 수도 있어요.
보다 강력한 CSS3 미디어 쿼리 지원을 찾고 있다면 https://code.google.com/p/css3-mediaqueries-js/를 확인해 보세요. 테스트에서 복잡한 반응형 디자인(파일 크기 및 성능 모두)을 렌더링할 때 해당 스크립트가 눈에 띄게 느려지는 것을 발견했지만 실제로는 이 스크립트보다 훨씬 더 많은 미디어 쿼리 기능을 지원합니다. 저자에게 큰 모자 팁! :)
