IE6~8의 반응형 레이아웃을 해결하기 위해 response.js를 사용하는 방법
- 一个新手원래의
- 2017-09-07 09:54:381311검색
반응형 레이아웃은 이상적으로 다양한 PC/모바일 단말기에 대응합니다. 미디어 쿼리는 IE9+ 및 기타 최신 브라우저에서 지원되지만 IE8은 여전히 시장에서 상대적으로 큰 시장 점유율을 차지하고 있으므로 IE 저가형 브라우저를 고려해야 합니다.
그럼 IE6~8 브라우저와 호환되는 반응형 레이아웃을 만드는 방법은 무엇일까요? 여기서는 response.js라는 파일을 사용해야 합니다. 파일 다운로드 주소: https://github.com/scottjehl/Respond.
모든 친구들에게 알려드립니다. response.js를 사용할 때 주의해야 할 사항이 있습니다. 주의를 기울이지 않으면 IE6-8에 표시되지 않습니다.
기본 스타일 작성
반응형 레이아웃을 구현하려면 먼저 기본 반응형 레이아웃 스타일을 작성해야 합니다.
코드 복사
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;
}}플러그인 원리
핵심 결론다음으로, respond.js의 구현 아이디어를 이해해야 합니다.
첫 번째 단계는 외부에서 도입된 모든 CSS 파일 경로를 헤드에 꺼내어 배열에 저장하는 것입니다. 두 번째 단계는 배열을 탐색하고 AJAX 요청을 하나씩 보내는 것입니다. 세 번째 단계는 AJAX 콜백 이후 응답에서 미디어 쿼리의 min-width 및 max-width 구문을 분석하고(min-width 및 max-width만 지원됨), 해당 CSS 블록을 분석합니다. 뷰포트 변경 간격
네 번째 단계는 페이지 초기화 및 window.resize 중에 현재 뷰포트에 따라 해당 CSS 블록을 사용하는 것입니다.
이 시점에서는 기본 구현 아이디어를 바탕으로 코드 작성 시 주의할 점을 얻을 수 있습니다.
1. 로컬 서버(localhost)를 시작해야 하며 일반 로컬 URL 주소(file://로 시작)를 사용할 수 없습니다. 2. CSS 파일은 외부에서 가져와야 하며 CSS 스타일을 스타일로 작성하는 것은 유효하지 않습니다. 3. 응답 플러그인은 CSS 파일을 검색한 후 처리하므로 응답 파일은 CSS 파일 뒤에 위치해야 합니다4. 또한 리스폰스를 머리나 몸 뒤에 배치하여 달성할 수도 있지만, 머리에 배치하는 것을 권장합니다. (구체적인 이유는 아래 문서 팁에 언급되어 있습니다.)
5. CSS에 대한 utf-8 인코딩을 설정하지 않고 기본값을 사용하는 것이 가장 좋습니다(자세한 내용은 아래 문서 팁 섹션 참조)
문서 팁
공식 문서의 일부 팁: 1. response.js 파일을 빨리 도입할수록 IE에서 나타나는 스플래시 화면을 피할 확률이 높아집니다.
2. 중첩된 미디어 쿼리는 지원되지 않습니다3. utf-8의 문자 인코딩은 response.js 파일의 작동에 영향을 미칩니다공식 API 원본 텍스트: CSS 파일이 Byte-Order-Mark를 사용하여 UTF-8로 인코딩된 경우 IE7 또는 IE8의 Respond.js에서 작동하지 않습니다. 기본 의미는 utf-8 형식의 CSS 파일의 문자 인코딩이 플러그인에 영향을 미친다는 것입니다.
하지만 테스트용으로 IE6-8을 사용하면 정상적으로 표시될 수 있습니다(css 파일에 문자셋 설정을 추가하든지 링크 태그에 문자셋 설정을 추가하든). 따라서 이 위치 버그의 의미가 무엇인지는 그다지 명확하지 않습니다.
4. 크로스 도메인 스플래시 화면이 나타날 수 있습니다(아직 테스트되지 않았으며 구체적인 상황은 알 수 없음)
인스턴스 데모<!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>
참고: 위에 명시된 대로 response.min.js 또는 response.src.js를 사용할 수 있습니다. 다운로드 주소에서 다운로드 받으실 수 있습니다. CSS 부분은 코드의 최상위 부분입니다. 표시 효과(IE6 및 IE7-8의 표시 효과는 문제가 없으므로 여기서는 매핑을 다루지 않겠습니다.):
연구 대상css3-mediaqueries-js에는 response.js에 비해 공식 문서나 데모가 없습니다. css3-mediaqueries-js는 거의 모든 미디어를 지원합니다. 쿼리 구문. 스플래시 화면이 나타납니다. 모든 미디어 쿼리를 지원할 수 있지만 실제로는 min-width 및 max-width가 반응형 레이아웃에 대한 요구 사항을 충족할 수 있으므로 사용하는 것은 권장되지 않습니다.공식 문서에서는 아직 명확한 내용을 해석하지 않았습니다(주로 명확하지 않습니다). 적용 방법)
<!-- 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>반응형 레이아웃을 지원하는 기타 플러그인 - css3-mediaqueries-js
CDN 지원
위 내용은 IE6~8의 반응형 레이아웃을 해결하기 위해 response.js를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!