4

Twitter ブートストラップを使用してレスポンシブ Web サイトを実装していますが、ieexplorer 8 以下ではメディア クエリを使用できません。

私は try Respond.js の簡単な例を作成しますが、メディアクエリは引き続き iexplorer 7-8 で動作しません。ここに 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;
}
}

よろしく

4

3 に答える 3

0

に関連するコードを追加したくない場合は、IE 8 を除いて CDN を介してrespond.js読み込みます。IE 8 の場合は、ローカルの静的ファイルを使用します。bootstrap.min.css

    <!--[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 およびその他の Webkit ブラウザーでテスト済み。

于 2015-04-17T16:36:05.323 に答える