Question

我想要不同的功能，具体取决于尺寸，并且：

$(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

Answer 1

您设置windowsize一次，但这通常是调整大小时必须更改的一个变量。只要把这一行：

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();

是经典的东西，你可以用另一个用户发布媒体查询。

Answer 2

尝试使用媒体查询。

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

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

响应，jQuery和.resize

2 个答案: