2

私は自分のレイアウトでウィジェットを使用していますが、現在それを持っているので、特定のブレークポイントに到達すると、その大きなウィジェットは表示されず、小さなウィジェットに移動します。大きなウィジェットは非表示になり、小さなウィジェットは表示されますが、両方に関連付けられているテキストは正しくありません。

大きいウィジェットのテキストは表示され、小さいウィジェットの小さいテキストは表示されません。それぞれが使用しているスクリプトに関係していると確信しています。display none は要素を非表示にしますが、スクリプトはまだ実行されているようです。

私はまだ JavaScript についてまったく手がかりがなく、可能であれば HTML または CSS の回答を希望します。そうでない場合は、JS を使用しますが、方向性が必要になります。私は数多くの記事を読みましたが、JS を学習している途中でも、読んだ内容のいくつかがどのように適用されるかはまだわかりません。

@media all and (max-width: 900px) {
  // styles
}

if (document.documentElement.clientWidth < 900) {
  // scripts
}

これは、私が必要としているもののように思われることがわかったものですが、必要なスクリプトを呼び出す方法の構文についてはわかりません。他の情報なしでスクリプト自体をそこに入れるだけですか? 私はまた、jqueryを使用してこのようなことを行うことについて読んだことがあります

$(window).resize(function() {
if ($(this).width() > 480) {
  // call supersize method
}
});

また、Modernizer を使用してこれを行うことについても読みましたが、まだドキュメントを確認する必要があります。

ビンにはテキストはまったく表示されませんが、大きなテキストはそこにあり、小さなウィジェットの横にあります。その大きなスクリプトをオフにして、特定のメディア クエリで別のスクリプトをオンにするだけです。

どんな助けでも大歓迎です。

HTML

  <aside class="smallScreen">
      <div class="smallWeather" style='width: 200px; height: 440px; background-image:
  url(http://vortex.accuweather.com/adcbin/netweather_v2/backgrounds/red_500x440_bg.jpg
  ); background-repeat: no-repeat; background-color: #993333;' ><div 
  id='NetweatherContainer' style='height: 420px;' ><script src='http://...'></script>  
  </div></div></aside>
  </div></div></div></aside>


  <aside class="largeScreen">
      <div class="largeWeather" style='width: 500px; height: 440px; background-image:
  url(http://vortex.accuweather.com/adcbin/netweather_v2/backgrounds/red_500x440_bg.jpg
  ); background-repeat: no-repeat; background-color: #993333;' ><div 
  id='NetweatherContainer' style='height: 420px;' ><script src='http://...'></script>  
  </div></div></aside>

CSS

  @media screen and (min-width: 564px) and (max-width: 604px) {
  .largeScreen {
display: none;
}

  .smallScreen {
display: block; 
width: 55%;
min-width: 240px;
height: 100%;
font-size: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.2rem;
}

  .smallWeather {
position: relative;
display: block;
width: 240px;
height: 420px;  
background: white;
margin-left: auto;
margin-right: auto;
}

これを行うための最良の方法は何ですか?また、その理由を教えてください。jQuery はモバイル パフォーマンスの観点から最良の方法ですか?

更新: enquire.jsを使用するのは、それが単純なアプローチであるため (ただし、使用方法についてはまだ少し大雑把ですが)、それがいかに小さいかです。

これは基本的なコードです:

enquire.register("screen and (max-width: 605px)", {

// OPTIONAL
// If supplied, triggered when a media query matches.
match : function() {},      

// OPTIONAL
// If supplied, triggered when the media query transitions 
// *from a matched state to an unmatched state*.
unmatch : function() {},    

// OPTIONAL
// If supplied, triggered once, when the handler is registered.
setup : function() {},    

// OPTIONAL, defaults to false
// If set to true, defers execution of the setup function 
// until the first time the media query is matched
deferSetup : true,

// OPTIONAL
// If supplied, triggered when handler is unregistered. 
// Place cleanup code here
destroy : function() {}

});

まだ完了しておらず、これに関するサポートを探しています。このルートを選択した今、enquire.js に関するかなりの数の記事と質問がすでにあることがわかりました。読みながら状況を更新します。

更新:これは私がいるところですが、まだ機能していません。各スクリプトに関連付けられたスタイルはまだ HTML にあり、それに応じて使用されているスタイルは表示されません。enquire.js を正しく取得したら、この作業を行うことはできますか?

これが新しいjsbinです

ありがとうございました！

4

1 に答える 1

0

CSS メディア クエリに応答するための軽量な JavaScript ライブラリであるenquire.jsのようなものを探していると思います。

ライブラリを使用したくない場合は、JavaScript でのメディア クエリへの対応に関するこの記事を参照して、標準の JavaScriptを使用して目的を達成する方法を実行してください。

jsFiddle Demoこれは、動作するサンプル コードをFullscreen jsFiddle Demo含む です。動作をテストするときに便利な があります。フルスクリーン バージョンを使用してブラウザ ウィンドウの600px幅を狭くすると、javascript アラートが表示されます。アラートが表示されるため、ブラウザーは元のサイズに戻り、サイズが600px再び大きくなったことを通知します。ご覧のとおり、一致するときは match 関数を呼び出し (読み込み時と幅を大きくするとき)、幅を小さくするときは unmatch 関数を呼び出します。はもう一致しません。これは、画面サイズに基づいて、モバイル専用またはデスクトップ専用の特定の関数を呼び出す方法です。

JS

enquire.register("screen and (min-width:600px)", {
    match: function () {
        alert("Now the screen width is more than 600px");
    },
    unmatch: function () {
        alert("Now the screen width is less than 600px");
    }
});
于 2013-09-19T07:34:44.720 に答える