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




우선순위 사이즈 (10)

가장 좋은 해결책은 Respond.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은 다음 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);


Internet Explorer 8 이전에는 Media 쿼리에 대한 지원이 없었습니다. 그러나 귀하의 경우에 따라 조건부 주석을 사용하여 Internet Explorer 8 이하만을 대상으로 시도 할 수 있습니다. 적절한 CSS 파일 아키텍처 만 사용해야합니다.


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


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

참고 : @ import'ed 스타일 시트에서는 작동하지 않습니다 (성능상의 이유로 사용해서는 안 됨). 또한 <link><style> 요소의 media 속성을 수신하지 않습니다.


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

같은 맥락에서 min-widthmax-width 미디어 쿼리 만 가능하게하는 간단한 Respond.js 가 있습니다.


수정 된 답변 : IE는 화면을 이해하고 가져 오기 미디어로 인쇄합니다. import 문과 함께 제공된 다른 모든 CSS는 IE8이 import 문을 무시하도록합니다. 사파리 나 모질라 같은 Geco 브라우저에는이 문제가 없었습니다.


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

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

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

<!--[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]-->

노트 :

엄밀히 말하면 IE의 목표를 정하기 위해 CSS 해킹 을 사용하는 것입니다. IE <9 스타일 시트와 동일한 영향을 미치지 만,이를 위해 별도의 스타일 시트가 필요하지 않습니다. 하지만이 옵션은 잘못된 CSS 코드를 생성하므로 권장하지 않습니다. CSS 해킹 사용이 일반적으로 금새 눈살을 찌푸리게하는 몇 가지 이유 중 하나입니다.


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


최신 야간 dompdf 빌드 잡아보십시오 - 나는 끔찍한 리소스 돼지 였고 영원히 내 PDF를 렌더링하는 데 사용되는 이전 버전을 사용했다. here 에서 야간을 붙잡고 난 후에.

PDF를 생성하는 데 몇 초 밖에 걸리지 않았습니다 . PrinceXML / Docraptor 와 마찬가지로 멋지게 렌더링되었습니다. 마치 내가 마지막으로 사용했기 때문에 dompdf 코드를 심각하게 최적화 한 것처럼 보입니다!





html css responsive-design internet-explorer-8 media-queries