正确调整全宽<ul>窗口大小和<li>响应式网站

Question

我在调整窗口大小时遇到了一个问题:http://goo.gl/BaIuy

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

除了水背景的容器外，每个容器的主<ul id="mask">都比窗口大小宽600%。这个ul#mask包含六个<li>元素，对应于网站的每个部分，并且每个部分的宽度为窗口大小的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%;
}

问题是，当你被定位在一个section不同于第一个(第一个<li id="home">)和调整窗口的大小所有<li>元素开始减少他们的宽度，但当前的<li>不完全的窗口大小和其他<li>元素开始出现在屏幕上由于调整大小的动作。

我已经尝试通过计算javascript的宽度和停用样式表中元素的宽度来调整元素的宽度，所以javascript会在页面加载时给它窗口宽度。，但似乎是缺少了什么，或者我做错了什么，看看这里:

    $(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%; */
}

我希望有人能帮忙，并感谢你的时间来看看这个

Answer 1

调整浏览器大小时更新滚动条位置

当浏览器调整大小时，容器的水平滚动位置不会更新。考虑到元素的宽度已经改变，并且考虑到页面可能已经通过@media查询切换到不同的布局，以前的水平滚动位置不再有效，需要更新。

调整大小后，每个容器应该立即滚动到正确的滚动位置，就好像用户重新单击了当前导航元素一样(除了滚动操作应该以0毫秒的持续时间执行)。

我不确定这是否会完全解决问题。在最坏的情况下，这也是一个需要解决的单独问题。

Answer 2

我有一个类似的问题，我在这篇文章中修复了，如果你想看看