ie8 이하의 트위터 부트 스트랩이있는 Respond.js

트위터 부트 스트랩이있는 반응 형 웹 사이트를 구현하고 있지만 iexplorer 8 이하에서는 미디어 쿼리를 사용할 수 없습니다. 7-8 IEXPLORER ie8 이하의 트위터 부트 스트랩이있는 Respond.js

내가 시도의 respond.js하지만 mediaqueries에 대한 간단한 예를 만듭니다에서 작동하지 않는 계속, 여기에 HTML입니다 :

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<meta charset="utf-8"> 
<title>Bootstrap 101 Template</title> 
<meta name="Description" content="Web description here" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
<link href="./css/styles.css" rel="stylesheet"> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<link rel="shortcut icon" href="./img/favicon.png"> 
</head> 
<body> 
<div class="container"> 
    <h1>Hello, world!</h1> 
</div> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
<script src="./js/respond.min.js"></script> 
<script src="./js/scripts.js"></script> 
</body> 
</html>

여기에있는 style.css입니다 :

@media only screen and (max-width: 38.75em) { 
body { 
    background: green; 
} 
}

안부

출처

2013-07-08 Kermit

당신은 </head> 태그 위에 <script src="./js/respond.min.js"></script>을 포함해야합니다.

출처

2013-08-24 22:23:49 alias51

위 스타일 시트 –

respond.js가 HTML 문서의 맨 아래에로드 된 경우에도 즉시 작업해야합니다. FOUC를 사용하면됩니다. 진짜 문제는 respond.js가 다른 도메인 (예 : 부트 스트랩 CDN)에서 스타일 시트를 가져 오지 않는다는 것입니다. –

https://github.com/scottjehl/Respond#cdnx-domain-setup

CDN/X-도메인 설정

Respond.js 당신은 CDN (또는 하위 도메인)에 스타일 시트를 개최, 그래서 만약 AJAX를 통해 CSS의 깨끗한 사본을 요청하여 작동

, 당신 도메인 간 통신을 사용하려면 프록시 페이지를 업로드해야합니다.

는 데모 크로스 도메인/example.html를 참조하십시오 : 당신은 크로스 도메인 설정에 문제가있는 경우

Upload cross-domain/respond-proxy.html to your external domain 
Upload cross-domain/respond.proxy.gif to your origin domain 
Reference the file(s) via <link /> element(s): 

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

하면, 추가 쿼리 문자열이없는 확인 응답-proxy.html을 그것.

참고 : 도메인 간 프록시의 기여에 대해 @doctyper에게 감사드립니다.

출처

2014-02-19 04:18:16

고마워요. 크레이그. 이것은 문서에서 직접 가져 왔지만 실제로 문제를 해결하지는 않습니다. HTML 파일을 부트 스트랩의 CDN에 업로드 할 수 없으므로 CDN을 버리면됩니까? –

Simon, 솔직히 말해서, 아직 그 문제를 해결할 시간을 보냈습니다. 나는 그것이 가능하다는 것을 안다. 잠시 동안 나는 Bootstrap과 CDN을 위해 로컬 CSS를 사용하고있다. 내가 할 수있는 모든 것들에 대해서는 respond.js로 조정할 필요가 없다. 답변을 찾으면 게시하십시오! =) –

respond.js과 관련된 코드를 추가하지 않으려면 IE8을 제외하고 CDN을 통해 bootstrap.min.css을로드하십시오. IE 8의 경우 로컬 정적 파일을 사용하십시오.

<!--[if lte IE 8]>              
     <link rel="stylesheet" href="/path/to/bootstrap.min.css' %}" /> 
    <![endif]-->                
    <!--[if gt IE 8]>           
     <link rel="stylesheet" href="{CDN Address}" />              
    <![endif]-->            
    <!--[if !IE]><!-->           
     <link rel="stylesheet" href="{CDN Address}" /> 
    <!--<![endif]-->

IE 8 ~ 11 및 기타 웹킷 브라우저에서 테스트되었습니다.

출처

2015-04-17 16:36:05

ie8 이하의 트위터 부트 스트랩이있는 Respond.js

답변

관련 문제