为响应式网站</li> </ul>正确调整全宽<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>元素都会开始减小其宽度，但当前{{1}由于调整大小操作，窗口大小不再填满，其他<li>元素开始出现在屏幕上。

我已经尝试通过使用javascript计算宽度来调整元素的大小，并停用样式表中元素的宽度，这样javascript就会在页面加载时给出窗口宽度。但似乎有些东西是失踪或者我做错了什么，看看这里：

<li>

我希望有人可以提供帮助，感谢您抽出时间来看看这个。

Answer 1

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

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

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

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

Answer 2

我有一个类似的问题，如果你想看一下我在this post修复了。