jquery - 画面解像度が x 未満の場合は css を追加

Question

画面解像度が 960px 未満の場合、要素の CSS を変更しようとしています

Firebug にエラーが表示されず、コードが機能しません。

<script type="text/javascript">
jQuery(window).resize(function() {
  if (jQuery(window).width() < 960) {
    jQuery(".snow").css('display', 'none');
  }
});
</script>

Answer 1

コマンドを使用して、これを完全に CSS で行うことができます@media。

@media (max-width:960px) { css... } //nothing with screen size bigger than 960px

@media (min-width:960px) { css... } //nothing with screen size smaller than 960px

こちらをご覧ください

Jason Whitted は良い点を指摘しています。これは CSS 3 のみであるため、古いブラウザーでは動作しません (ただし、すべての最新ブラウザーでは動作するはずです)。互換性については、こちらを参照してください。主な問題は IE 8 以下です。

編集 - デバイスの選択

@media screen { .nomobile { display: block; } } //desktops/laptops

@media handheld { .nomobile { display: none; } } //mobile devices

または、モバイル デバイスの幅が小さくなると仮定して、それを続けることもできます。