3

私はレスポンシブ レイアウトを構築し、タブ、ドロップ メニュー、上部へのスクロールなど、いくつかの jQuery プラグインを利用しています。ブラウザが最小の位置にあるときに、jQuery の魔法を取り除く方法に苦労しています。 ?

現在、小さなビューでの効果は見栄えが悪いので、気にしない場合は、いくつかのポインターまたはコード例を探しています.

たとえば、jQuery IF ブラウザの視点が =< 320px の場合、実行しないでください。

ここに投稿する前に、最初に少し調査を行いました。専門家が支援できることを願っています。

4

2 に答える 2

2

$(window).resizeイベント内に width 条件をラップしてみるのも一つの方法です:

$(document).ready(function(){
   $(window).resize(function() {
      if ($(window).width() <= 320) {
         // Leave empty
      }
      else {
        // Rest of your jQuery code can go here
      }
   });
});
于 2013-04-06T09:30:58.700 に答える
0 
$(window).resize(function(){
    var h = $(window).height();
    var w = $(window).width();

    if(w <= 320) {
         // Run your script
    }
});

ただし、レスポンシブ Web デザインを構築するには、CSS3メディア クエリを使用することをお勧めします。

メディア クエリは、メディア タイプと、幅、高さ、色などのメディア機能を使用してスタイル シートの範囲を制限する少なくとも 1 つの式で構成されます。CSS3 で追加されたメディア クエリを使用すると、コンテンツ自体を変更することなく、特定の範囲の出力デバイスに合わせてコンテンツの表示を調整できます。

例えば：

@media only screen and (max-width : 320px) {
    /* Your styles here */
}
于 2013-04-06T09:33:00.253 に答える