26

ロード時またはウィンドウのサイズ変更時にクラスを追加/削除するための非常に基本的なスクリプトを作成しました。

これを行うためのより良い方法があるのか​​、それともコードの行を減らすことができるのか、私はただ疑問に思っていました。

基本的には、サイトを小さい画面で表示したときにスタイルを変更できるようにしたいと思います。一定の幅を超えたら、htmlタグに新しいクラスを追加するのが最善だと思いました...

とにかくここに私のコードがあります。

<script type="text/javascript">
 $(document).ready( function() {
    /* Check width on page load*/
    if ( $(window).width() < 514) {
     $('html').addClass('mobile');
    }
    else {}
 });

 $(window).resize(function() {
    /*If browser resized, check width again */
    if ($(window).width() < 514) {
     $('html').addClass('mobile');
    }
    else {$('html').removeClass('mobile');}
 });

ありがとう

ジリアン

4

7 に答える 7

56

パーティーに遅れたことはわかっていますが、そのような$(document).ready()ことは実際には必要ではないことがわかりました。

セレクターを何度も呼び出す場合は、セレクターをキャッシュしてみてくださいvar $window = $(window);。これにより、パフォーマンスが向上します。関数式を使用してカプセル化して、グローバル スコープの外にとどまりますが、$windowキャッシュ$htmlされた jQuery の選択した要素にアクセスできます。

(function($) {
    var $window = $(window),
        $html = $('html');

    $window.resize(function resize(){
        if ($window.width() < 514) {
            return $html.addClass('mobile');
        }

        $html.removeClass('mobile');
    }).trigger('resize');
})(jQuery);

http://jsfiddle.net/userdude/rzdGJ/1

おそらくもう少しきれいで、従うのが少し簡単です：

(function($) {
    var $window = $(window),
        $html = $('html');

    function resize() {
        if ($window.width() < 514) {
            return $html.addClass('mobile');
        }

        $html.removeClass('mobile');
    }

    $window
        .resize(resize)
        .trigger('resize');
})(jQuery);

http://jsfiddle.net/userdude/rzdGJ/2

于 2012-06-15T09:11:21.300 に答える
16

メディア クラスを使用する

@media screen and (max-width: 900px) {
  .class {
    width:800px;

  }
}

@media screen and (max-width: 500px) {
      .class {
        width:450px;

  }
}
于 2012-06-15T09:03:50.717 に答える
15

まず、関数を使用してコードを DRY (Don't Repeat Yourself) します。

function checkWidth(init)
{
    /*If browser resized, check width again */
    if ($(window).width() < 514) {
        $('html').addClass('mobile');
    }
    else {
        if (!init) {
            $('html').removeClass('mobile');
        }
    }
}

$(document).ready(function() {
    checkWidth(true);

    $(window).resize(function() {
        checkWidth(false);
    });
});
于 2012-06-15T09:05:20.027 に答える
8 
function resize() {
    if ($(window).width() < 514) {
     $('html').addClass('mobile');
    }
    else {$('html').removeClass('mobile');}
}

$(document).ready( function() {
    $(window).resize(resize);
    resize();
});
于 2012-06-15T09:02:48.680 に答える
4

この方法も使用できます。従うことは非常に明確だと思います。

$(window).on('resize', function(){
      var win = $(this);
      if (win.width() < 514) { 

      $('html').addClass('mobile');

      }
    else
    {
        $('html').removeClass('mobile');
    }

});

簡単な方法

于 2014-09-26T18:19:03.523 に答える