jquery - 画面サイズに応じて CSS クラスを削除 jQuery

Question

画像の拡大鏡の機能を提供する画像要素にセレクターが接続されています。セレクターを削除する必要があるため、拡大鏡が開始されなくなり、画面サイズに応じて再度追加されます。たとえば、モバイル画面でアクセスした場合、クラスを削除したいと思います。画面サイズが 480px 以上に調整される場合は、クラスを再度追加してください。これにアプローチするための最良かつ最も効率的な方法は何ですか? どんな助けでも大歓迎です。

Answer 1

jQuery を気にしない場合は、単純な例でうまくいくかもしれません。

CSS:

.red{
background:red;
}

.yellow{
background:yellow;
}

HTML:

<div style="width:300px; height:100px;" class="yellow"></div>

jQuery:

$(function(){

$(window).bind("resize",function(){
    console.log($(this).width())
    if($(this).width() <500){
    $('div').removeClass('yellow').addClass('red')
    }
    else{
    $('div').removeClass('red').addClass('yellow')
    }
})
})

これにより、含まれているウィンドウのサイズを変更するたびに、div 要素の色が変更されます。

フィドルを参照してください: http://jsfiddle.net/6v7GE/

注: フィドルでのサイズ変更は、含まれているウィンドウのホルダーをスライドさせます。

Answer 2

複数のスタイル シートを使用する @media クエリ (画面サイズに基づいて異なる css を適用する)、または java-script または java-script ライブラリのいずれかを適用することをお勧めします。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

Answer 3

次のコードを試してください。

 $(window).resize(function() {

      if ($(this).width() < 1024) {
        $('.div').hide();
      } else {
        $('.divNew').show();
      }

});

このコードを使用すると、幅に応じて div を非表示にできます。

Answer 4

メディアクエリを使用しないのはなぜですか?

http://en.wikipedia.org/wiki/Media_queries

それらは、そのような状況に対処するために設計されました。