Jquery - 特定のブラウザの幅で要素を隠す

Question

ブラウザが特定の幅を読み取ったときに要素を削除するようにjQueryを取得しようとしています。私はjqueryの新しさです。私は感謝この今のところ

jQuery(function ($) { 
       $(window).resize(function(){ 


       }); 
     }); 

ヘルプを持っているか、ブラウザの幅を検出するが、私は、ブラウザの×幅に達したときのid Y

で順不同のリストを削除

を言うためにどのようにうまくカント私のことができ、ワークアウト

Answer 1

おそらく、CSSのメディアクエリでこれを行う必要があります。 Javascriptでこれをやろうとすると、ウィンドウがサイズ変更されているときに発生するすべてのサイズ変更イベントのため、ひどく遅くなるでしょう。

Answer 2

次のように動作します：あなたがそうしてみてください、このアプローチを避けることができれば、

$(window).resize(function(){ 
    var width = $(this).width(); // The window width 
    if (width < someSize) { 
    $('#y').hide(); // Or to completely remove it form the DOM use `remove()` 
    } 
}); 

しかし、スタイリングは、一般的に最高のCSSの懸念として残っています。

Answer 3

$(window).height();と$(window).width();を使用してサイズを決定できます。

Answer 4

CSSのメディアクエリを使用すると、jQueryを使用せずにこれを行うことができます。

これらのリソースをチェックアウト：

http://www.w3.org/TR/css3-mediaqueries/

http://mislav.uniqpath.com/2010/04/targeted-css/

http://protofunc.com/scripts/jquery/mediaqueries/

それはまだ使用してjQueryの中で行うことができます。それはまたすることができ

jQuery(function ($) { 
      $(window).resize(function(){ 
       var _width = $(this).width(); 
       if(_width > 900 && $('#myElement').is(':visible')) 
         $('#myElement').hide(); 
       else if (_width <= 900 && !$('#myElement').is(':visible')) 
         $('#myElement').show(); 
      }); 
    }); 

を完了：

jQuery(function ($) { 
      $(window).resize(function(){ 
       var _width = $(this).width(); 
       if(_width > 900) 
         $('#myElement:visible').hide(); 
       else if (_width <= 900) 
         $('#myElement:hidden').show(); 
      }); 
    });