javascript - 响应式、jQuery 和 .resize

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