Javascript 正确调整全宽窗口的大小<；ul>；及<；李>；适用于响应性强的网站

调整窗口大小时，我对此网站有问题：

让我试着解释一下。正如你所看到的，我正试图获得在鱼缸中的体验。它由4个不同的容器组成，一个用于水背景，一个用于内容，另一个用于鱼图像，最后一个用于浮木和海藻等图形对象

除了用于水背景的容器外，每个容器都有一个比窗口尺寸宽600%的主

。此

ul#mask

包含六个

元素，对应于网站的每个部分，每个部分的宽度为窗口大小的100%

<ul id="mask">
    <li id="home" class="box"></li> 
    <li id="about" class="box"></li>    
    <li id="services" class="box"></li> 
    <li id="clients" class="box"></li>  
    <li id="give" class="box"></li>
    <li id="contact" class="box"></div></li>
</ul>

#mask {
    float: left;
    padding: 0;
    width: 600%;
}

#mask > li {
    float: left;
    list-style: none;
    width: 16.66666666%;
}

我希望有人能提供帮助并感谢您抽出时间来查看此信息。

调整浏览器大小时更新滚动位置 调整浏览器大小时，容器的水平滚动位置不会得到更新。鉴于元素的宽度已更改，且页面可能已通过

@媒体

查询切换到不同的布局，先前的水平滚动位置不再有效，需要更新

调整大小后，应立即将每个容器滚动到正确的滚动位置，就像用户重新单击当前导航元素一样（滚动操作的持续时间应为0毫秒）

---

我不确定单凭这一点是否就能完全解决问题。最坏的情况是，这是一个单独的问题，也需要解决。

我有一个类似的问题，如果你想看的话，我已经解决了。

那么你到底是如何移动幻灯片的呢？我正在使用这个Scrollto插件

    $(function () {
    $('.header').fadeIn(1600);
    $('.mainWrapper ul#mask').fadeIn(4000);
    $('.secondLayer ul#mask').fadeIn(4000);
    $('.thirdLayer ul#mask').fadeIn(4000);

        $('ul#mask').css({width: '600%'});
        $('ul#mask li').css({width: '16.66666666%'});

        $(window).resize(function() {
            var viewPortSize = $(window).width();
            var maskSize = parseInt(viewPortSize)*6
            var maskLiSize = parseInt(maskSize)/6

            $('ul#mask').width(maskSize);
            $('ul#mask li').width(maskLiSize);
        });
    });

#mask {
    display: none;
    float: left;
    padding: 0;
    /* width: 600%; */
}

#mask > li {
    float: left;
    list-style: none;
    /* width: 16.66666666%; */
}