7

レスポンシブウェブサイトを作成していますが、IEで動作させることができないようです（IE8でテストしています）。これで、InternetExplorer8以下はCSS3メディアクエリをサポートしていないことがわかりました。しかし、css3-mediaqueries.js Javascriptファイル（Googleがホスト）を含めましたが、それでも機能しません。

最小限のコードを残してすべてのコードを削除しました（文字通り、HTMLは26行、CSSは合計34行）。HTMLはHTML5として正常に検証され、CSSはCSSレベル3として検証されます。コードは次のとおりです。

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<title>Responsive Site</title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" />

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

</head>
<body>
<div class="wrapper">
    <div id="article">&nbsp;</div>
    <div id="side">&nbsp;</div>
</div>
</body>
</html>

custom.css：

@charset "UTF-8";

/*html5 display rule*/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block;}

body {margin: 0px; padding:0px}

.wrapper {
    width:78%; 
    margin:0 auto}

#article {
    float:left;
    width:61.224489795%;
    margin:20px 0 0 0;
    padding:0;
    height:500px;
    background-color:#000}

#side {
    float:right;
    width:30.775510204%;
    margin:20px 0 0 0;
    padding:0;
    height:500px;
    background-color:#999}

response.css：

@charset "UTF-8";

#article {
    width:100%}

#side {
    width:100%;
    clear:left}
4

4 に答える 4

6

@importedスタイルシート（githubおよびgoogleコードプロジェクトに記載されています）を使用できないことに加えて、次のような形式でメディアクエリを明示的に指定しないと問題が発生します。

@media screen and (min-width: 666px) and (max-width: 1000px)

に比べ：

@media and (min-width: 666px) and (max-width: 1000px)

このプロジェクトのgithubの問題セクションでこの問題を確認してください-これを設定しようとして約1時間後-私のメディアクエリに 画面がないため、認識されませんでした。

于 2013-07-19T02:03:12.747 に答える
4

私はついにそれを理解しました！そして、ほんの数行のコードを変更する必要がありました。

友人は、css3-mediaqueries.jsJavascriptファイルのドキュメントには次のように書かれていると指摘しました。

注： @importされたスタイルシートでは機能しません（パフォーマンス上の理由から、とにかく使用しないでください）。また、要素のメディア属性をリッスンしません。

HTMLファイルのlink要素でmedia属性を使用していました。それで、これが問題を解決するために私がしたことです：

削除したHTMLファイル：

<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" />


そしてそれを次のように置き換えました：

<link rel="stylesheet" type="text/css" href="css/responsive.css" />


次に、media属性をresponse.cssファイルに追加しました。

@charset "UTF-8";
@media screen and (max-width: 800px) {
#article {
    width:100%}

#side {
    width:100%;
    clear:left}
}

しかし、それでも機能しませんでした。次に、response.cssファイルのメディア属性と@charset属性の順序を変更しました。1行目と2行目を単純に並べ替えました。

@media screen and (max-width: 800px) {
@charset "UTF-8";

それでうまくいきました。文字セットの順序が違いを生む理由が正確にわかりませんか？おそらく誰かがそれに光を当てることができます。

有用な提案をしてくれたDavidに感謝します！ツールシェッドにいくつかのオプションがあるのは良いことであり、将来はresponse.jsに目を向ける可能性があります。しかし今のところ、私はGoogleがホストしているコードに満足しています。

于 2013-02-28T17:32:17.817 に答える
1

response.jsを試しましたか？

幸運を！

アップデート

2つのCSSファイルを1つにまとめた方が安全な場合があります。次のコマンドを使用して、モバイル仕様をcustom.cssファイルに追加します。 

@media (min-width: 50px) and (max-width: 800px) {  

  /* mobile CSS here */

} /* close @ media for mobile */
于 2013-02-28T02:03:11.850 に答える
0 
<meta http-equiv="X-UA-Compatible" content="IE=9">

他のメタタグの前に配置する必要があります。

于 2015-05-15T15:40:11.513 に答える