0

サイズに応じて異なる機能が必要です。これは次のとおりです。

$(window).resize(function() {
    checkWidth();
    location.reload();
});

動作していないようです。

var windowsize = $(window).width();
// resize browser
function checkWidth() {

    if (windowsize > 700) {
        $('#list').show();
        $('#nav_bu').hide();
        showcased();
        $('.project a').attr('href', '#top_shade');
    }
    else {
        accordion();
        $('.showcase').hide();
        $('#nav_bu').show();
    }
}
// on load
checkWidth();

http://kirkradish.com/2013/kirk3.htmlをご覧ください。

4

2 に答える 2

3

一度設定しますwindowsizeが、これは従来、サイズ変更時に変更される 1 つの変数です。この行を入れるだけです：

var windowsize = $(window).width();

あなたの関数に：

function checkWidth() {
    //here we go:
    var windowsize = $(window).width();

    if (windowsize > 700) {
        $('#list').show();
        $('#nav_bu').hide();
        showcased();
        $('.project a').attr('href', '#top_shade');
    }
    else {
        accordion();
        $('.showcase').hide();
        $('#nav_bu').show();
    }
}

そして、次のようなもの：

  $('#list').show();
  $('#nav_bu').hide();

別のユーザーが投稿したように、メディアクエリで行う古典的なものです。

于 2013-04-05T15:06:05.990 に答える
2

メディア クエリを使用してみてください。

@media (min-width: 700px) { ... }

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

于 2013-04-05T15:03:39.803 に答える