1

メディア クエリを利用する CSS スタイル シートがあります。私のホームページは、100% x 100% の背景画像であり、その上に iframe を中央に配置します。これには、メディア クエリの結果に基づくソースが含まれます。

例えば：

CSS

@media all and (max-width: 500px) and (min-width: 400px), (min-width: 1151px)

.frame1{
 position:absolute;
 width:390px;  
 left:50%;
 margin-left:-195px;
 }

HTML

 <iframe class="frame1"></iframe>

したがって、幅の範囲は 400px から 500px であり、この範囲のどの画面でも、コンテンツは中央の iframe に配置され、画面が広いほど背景画像のマージンが大きくなります。私の問題は、画面サイズに応じて iframe ソースを変更して、小さな画面でソースを mobile.htm (Web サイトの非常に基本的なバージョンを表示)、standard.htm (中級バージョン) として使用できるようにすることです。平均的な画面と大画面の large.htm (追加コンテンツを含む)。

しかし、これを行うために考えたことは何も得られません。CSSにリストされているiframeの属性でなければならないメディアクエリによって決定されると思いますか? 私は次のすべての組み合わせを試しました：

フレーム src: __ .htm;

iframe src: _ .htm;

フレーム src: url( _ __ .htm);

iframe src: url( _ __ .htm);

フレーム src: url (" _ _ .htm");

等

※下線はページ名です。

しかし、これまでのところ何も機能していません。

これが可能かどうか誰にもわかりますか？もしそうなら、どのように？そして、説明には優しくしてください。私はこれに非常に慣れていないので、進みながら独学で、自分が望むものを達成するために必要な部分を少しずつ学んでいます...これまでのところうまくいっていますが、私は困惑しています何日も！

4

1 に答える 1

1

属性に基づいて一致させることはできますが、CSS のみを使用して属性を設定することはできません1

ただし、JavaScript の小さなスニペットを使用して、(間接的ではありますが) メディア クエリの結果を検出できます。

  • メディア クエリを使用してプロパティ値をIFRAME
  • JavaScript を使用してそのプロパティ値を持つ要素を選択します (これにはjQuery セレクターが機能しますが、反復が必要になる場合があります)。
  • srcそれに応じて更新する

ただし、実際には、メディア クエリと JavaScript の間に直接的な相関関係はありません。メディアクエリと JS のペアリングに関する記事から:

私の知る限り、JavaScript からメディア クエリに直接アクセスすることはできません。上記の例のメディア クエリが実行されたかどうかを読み取ることはできません。

記事全文では、メディア クエリの結果と一致するスクリプトから結果を返すためのスクリプト ベースの回避策をいくつか提案しています。

1 - 少なくとも、広くサポートされている標準ベースの方法ではありません。IE 独自の式を使用して CSS 内でコードを実行するためのハックがあります (これらはすべて非推奨です)。

于 2012-05-19T14:40:39.793 に答える