14

ここにいくつかのHTMLがあります：

<iframe src="test.html" style="width: 200px; height: 100px;"></iframe>
<iframe src="test.html" style="width: 800px; height: 100px;"></iframe>

このtest.htmlページには、外部ファイルのCSSが含まれています。

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

そして、スタイルシートには次のものがあります。

@media all and (max-width: 600px) {
  body {background-color: red;}
}

上記は簡略化されていますが、問題を十分に示しています。一方が他方よりも明らかに幅が広いにもかかわらず、両方のページが赤です。デモンストレーションページ

何が得られますか？

（注：IEとChromeでテスト済み-Chromeは問題なく、一方のフレームは赤、もう一方のフレームは白でした。）

4

2 に答える 2

18

この回答でわかるように、Internet Explorer 9はCSS3メディアクエリをサポートしていますが、メディアクエリを含むCSSが外部ファイルにある場合はフレーム内ではサポートされないため、メディアクエリをtest.htmlページの先頭に配置する必要があります。以前のIEバージョンは、メディアクエリをネイティブにサポートしていませんが、javascriptライブラリ（respond.jsまたはcss3-mediaqueries-jsを参照）を使用してこの問題を解決できます。

于 2012-09-20T19:34:45.970 に答える
-1

次のスクリプトで jquery を使用してジョブを実行できます。

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
    $(document).ready(function() {
        if ($(document).width() < 600) {
            $('body').css('background-color', 'red');
        };
    });
</script>
于 2012-09-19T13:36:27.653 に答える