Question

所以我目前正在开发一个具有响应式布局的单页网站。在较小的屏幕上，我使用动画滚动插件在内容div之间导航，但在较大的屏幕上，我使用插件来简单地切换这些div的可见性。

我遇到的问题是，如果在加载页面后调整窗口大小，我需要更改脚本。我认为$（window）.resize会做的伎俩但它似乎没有工作并继续使用最初加载的脚本而不是执行正确的脚本。 .anchorAnimate和.anchorTog是我正在使用的插件，但我不认为它们是这里的问题。如有必要，我可以发帖。

代码：

$(document).ready(function() {

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

    if(w <= 767) {
        $('a.anchorLink').anchorAnimate();
    }
    if(w >= 768) {
        $('a.anchorLink').anchorTog();
    }

    $(window).resize(function(){
        if(w <= 767) {
            $('a.anchorLink').anchorAnimate();
        }
        if(w >= 768) {
            $('a.anchorLink').anchorTog();
        }
    });
});

Answer 1

在您的代码中，变量“w”超出了resize函数的范围。当文档达到就绪状态时，“w”将只是窗口宽度。要解决此问题，您可以在调整大小函数中重新声明变量，这样每次调整大小时，我们都会检查宽度：

$(window).resize(function(){
    var w = $(window).width();
    if(w <= 767) {
        $('a.anchorLink').anchorAnimate();
    }
    if(w >= 768) {
        $('a.anchorLink').anchorTog();
    }
});

Answer 2

响应式设计通常意味着CSS，而不是JavaScript。

在CSS3中，您可以使用@media定义要支持的屏幕尺寸。

如果您使用CSS，您可以使用硬件加速动画，这比您在JavaScript中可以做的任何事情都要顺畅。

谷歌的“响应式设计css3”，你会得到很多例子。

具有（窗口）.resize的响应式布局的多个脚本

2 个答案: