CSS 미디어 쿼리에 대한 IE8 지원

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

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

그렇지 않은 경우 대체 작성 방법은 무엇입니까? Firefox에서도 동일하게 작동합니다.

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

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

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 플러그인을 사용하는 것보다 더 간단하고 접근하기 쉬운 솔루션이 될 수 있습니다.

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

같은 맥락에서 당신은 간단하게이 Respond.js 만 가능 min-width하고 max-width미디어 쿼리를.

내가 찾은 최고의 솔루션은 Respond.js입니다. 특히 주요 관심사가 IE8에서 반응 형 디자인이 작동하는지 확인하는 경우입니다. min / gzipped 일 때 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는 미디어 쿼리를 지원하지 않습니다. Safari 3.2는 부분적으로 지원합니다.

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

미디어 쿼리 jQuery 플러그인 (최대 / 최소 너비 만 처리)

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

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

참고 : @ import'ed 스타일 시트 (성능 때문에 어쨌든 사용해서는 안 됨)에서는 작동하지 않습니다. 또한 <link>및 <style>요소 의 미디어 속성을 듣지 않습니다 .

css3-mediaqueries-js를 사용하는 쉬운 방법은 닫는 body 태그 앞에 다음을 포함시키는 것입니다.

<!-- 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 문과 함께 제공된 다른 모든 CSS는 IE8이 import 문을 무시하도록합니다. 사파리 나 모질라와 같은 Geco 브라우저에는이 문제가 없었습니다.

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

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

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

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

CSS Mediaqueries 는 같은 일을하는 또 다른 라이브러리입니다. 해당 라이브러리를 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]-->

노트 :

기술적으로는 CSS 해킹 을 사용하여 IE <9를 대상으로 하는 또 하나의 대안 입니다. IE <9 전용 스타일 시트와 동일한 영향을 미치지 만 별도의 스타일 시트는 필요하지 않습니다. 그러나이 옵션은 잘못된 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 {}했고 REAL IE8에서 나에게 잘 작동합니다.

IE는 IE9까지 미디어 쿼리 지원을 추가하지 않았습니다. 따라서 IE8을 사용하면 운이 없습니다.