CSS 미디어 쿼리를 위한 IE8 지원

CSS 미디어 쿼리를 위한 IE8 지원

IE8은 다음 CSS 미디어 쿼리를 지원하지 않습니다.

@import url("desktop.css") screen and (min-width: 768px);

그렇지 않다면 대체적인 글쓰기 방법은 무엇입니까?파이어폭스에서도 마찬가지로 잘 작동합니다.

아래 코드에 문제가 있습니까?

@import url("desktop.css") screen; 
@import url("ipad.css") only screen and (device-width:768px);

css3-mediaquery-js가 아마도 당신이 찾고 있는 것일 것입니다. 이 스크립트는 미디어 쿼리를 에뮬레이트합니다.그러나 (스크립트의 사이트에서) "그것은 작동하지 않습니다.@imported 스타일시트(성능상의 이유로 사용하지 않아야 함).또한 미디어 속성을 듣지 않을 것입니다.<link>그리고.<style>요소"라고 말합니다.

같은 맥락에서 보다 단순한 Response.js를 사용할 수 있습니다.min-width그리고.max-width미디어 쿼리

IE9 이전 버전의 Internet Explorer는 미디어 쿼리를 지원하지 않습니다.

IE8 사용자를 위해 디자인을 저하시키는 방법을 찾고 있다면 IE의 조건부 코멘트가 도움이 될 것입니다.이를 사용하여 이전 규칙을 덮어쓰는 IE 8/7/6 특정 스타일시트를 지정할 수 있습니다.

예를 들어,

<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

이것은 IE8에서 반응형 설계를 허용하지 않지만 JS 플러그인을 사용하는 것보다 더 간단하고 접근하기 쉬운 솔루션이 될 수 있습니다.

제가 찾은 가장 좋은 해결책은 Response.js입니다. 특히 고객님의 주된 관심사가 IE8에서 응답형 디자인이 작동하는지 확인하는 것이라면 더욱 그렇습니다.min/gzip 시 1kb로 상당히 가벼우며 IE8 클라이언트만 로드할 수 있습니다.

<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->

부트스트랩(http://getbootstrap.com/getting-started/ #support-ie8-ie9)을 사용하는 경우 권장되는 방법이기도 합니다.

IE8(및 하위 버전) 및 3.5 이전 버전의 Firefox는 미디어 쿼리를 지원하지 않습니다.사파리 3.2는 부분적으로 지원합니다.

이러한 브라우저에 미디어 쿼리 지원을 추가하기 위해 JavaScript를 사용하는 몇 가지 해결 방법이 있습니다.다음을 시도해 보십시오.

미디어 쿼리 jQuery 플러그인(max/min width만 처리)

css3-mediaquery-js – 미디어 쿼리 지원을 지원하지 않는 브라우저에 추가하기 위한 라이브러리

CSS3 mediaqueries.js 프로젝트 페이지에서 가져왔습니다.

참고: @imported 스타일시트에서는 작동하지 않습니다(성능상의 이유로 사용해서는 안 됨).또한 미디어 속성을 듣지 않을 것입니다.<link>그리고.<style>요소들.

css3-mediaquery-js를 사용하는 쉬운 방법은 닫는 본문 태그 앞에 다음을 포함하는 것입니다.

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script 
   src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->

편집된 답변: IE는 화면과 인쇄만 수입 매체로 이해합니다.import statement와 함께 제공되는 다른 모든 CSS는 IE8이 import statement를 무시하게 합니다.사파리나 모질라 같은 게코 브라우저는 이런 문제가 없었습니다.

IE8 이하에서는 미디어 쿼리를 전혀 지원하지 않습니다.

---

자바스크립트 기반 해결 방법

IE8 지원을 추가하기 위해 여러 JS 솔루션 중 하나를 사용할 수 있습니다.예를 들어 응답을 추가하여 IE8에 대한 미디어 쿼리 지원을 다음 코드로만 추가할 수 있습니다.

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

CSS 미디어 쿼리는 같은 작업을 수행하는 또 다른 라이브러리입니다.해당 라이브러리를 HTML에 추가하는 코드는 동일합니다.

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

---

대안을

JS 기반 솔루션이 마음에 들지 않으면 IE<9에 맞는 스타일링을 조정할 수 있는 IE<9 전용 스타일시트를 추가하는 것도 고려해야 합니다.이를 위해서는 코드에 다음 HTML을 추가해야 합니다.

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

---

참고:

기술적으로 그것은 또 하나의 대안입니다: IE<9를 목표로 CSS css을 사용하는 것입니다.IE<9 전용 스타일시트와 동일한 효과를 갖지만 별도의 스타일시트가 필요 없습니다.그러나 CSS가 유효하지 않은 CSS 코드를 생성하기 때문에 이 옵션을 권장하지 않습니다(이것은 오늘날 CSS 해킹의 사용이 일반적으로 눈살을 찌푸리게 하는 몇 가지 이유 중 하나일 뿐입니다).

Internet Explorer 8 이전에는 미디어 쿼리를 지원하지 않았습니다.그러나 경우에 따라 조건부 설명을 사용하여 Internet Explorer 8 이하만 대상으로 지정할 수 있습니다.적절한 CSS 파일 아키텍처를 사용하기만 하면 됩니다.

http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php

사용했습니다.@media \0screen {}REALIE8에서도 잘 통합니다.

IE가 IE9까지 미디어 쿼리 지원을 추가하지 않았습니다.IE8의 경우 운이 없습니다.

언급URL : https://stackoverflow.com/questions/5769493/ie8-support-for-css-media-query