适当调整全宽 <ul> 的窗口大小和<li>对于响应式网站 [英] Proper window resizing of full width <ul> and <li> for responsive website

问题描述

我在调整窗口大小时遇到​​此网站的问题:http://goo.gl/BaIuy

I have an issue with this website when resizing the window: http://goo.gl/BaIuy

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

Let me try to explain. I'm trying to achieve the experience of being in a fishbowl as you can see. It's made with 4 different containers, one for the water background, one for the content, another for the fish images and the last one for the graphic objects like the driftwood and seaweed.

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

.这个 ul#mask 包含六个
• 元素，它们对应于网站的每个部分，每个部分的宽度为窗口大小的 100%.

  Each container, except the one for the water background, have a main <ul id="mask"> that is 600% wider than the window size. This ul#mask contains six <li> elements that correspond to each one of the sections of the website and have a width of 100% of the window size each one.

  <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%;
  }
  

  问题是，当您定位在与第一个不同的部分(第一个

• )并调整窗口大小时，所有
• ; 元素开始减小它们的宽度，但当前
• 不再填满窗口大小，其他
• 元素开始出现由于调整大小操作而在屏幕中.

  The problem is that when you are positioned on a section different from the first one (first <li id="home">) and resize the window all <li> elements start to decrease their width but the current <li> doesn't full the window size any more and other <li> elements start appearing in the screen due the resizing action.

  我已经尝试通过使用javascript计算宽度并停用样式表中元素的宽度来为元素提供调整大小的宽度，因此javascript会在页面加载时为其提供窗口宽度.，但似乎有些东西丢失或我做错了什么，请看这里:

  I already tried to give the resized width to elements by calculating the width with javascript and deactivated the width of elements in the stylesheet so the javascript does it giving it the window width when page has been loaded., but it seems something is missing or I'm doing something wrong, take a look here:

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

  我希望有人能帮助并感谢您花时间看一看.

  I hope someone can help and appreciate your time to take a look at this.

  推荐答案

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

  I had a similar problem which i fixed in this post if you want to have a look.

  这篇关于适当调整全宽 <ul> 的窗口大小和<li>对于响应式网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！