为响应式网站正确调整全宽 <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%;
}

问题在于，当您位于与第一个不同的部分（第一个 <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

如果你想看看，我有一个类似的问题，我在this post 中解决了。