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 브라우저에는이 문제가 없었습니다.