Question

当您将其调整为中小视图时，我的网站会出现一些严重问题。它在全屏和移动视图中看起来很棒，但是当您将其缩小到中等和更低时，浏览器中会出现一些严重问题。我使用过基础，但也混合了一些我认为会导致一些问题的非基础代码，例如容器。我还怀疑顶部导航栏有问题，因为它也会缩小缩小的视图。有很多代码可供查看，但我会在这里发布一些片段以及链接到主站点，以便您查看完整的代码。

这里有一些顶部栏我也有一个容器，它不是网格的一部分，可能会丢掉东西，还有一个奇怪的标题元素，我编写了一些css，如果删除它会抛出它好。基本上，我的代码有点混乱，我会尽力清理它，一旦我弄清楚导致浏览器调整大小时导致很多混乱的原因。（ps。要查看其余代码和css，请访问www.omegadesignla.com并检查元素，或者让我粘贴特定部分，谢谢！）

 <nav class="top-bar" data-topbar>
          <ul class="title-area">
            <li class="name">

              <span><a href="index.html"><img class="logo" src="img/primarylogo.png"></a><span>
            </li>
            <li class="toggle-topbar menu-icon">
              <a href="#">Menu</a>
            </li>
          </ul>

          <section class="top-bar-section">

            <ul class="right">
              <li><a href="#about">About us</a></li>
              <li><a href="#" data-reveal-id="myModal">Contact us</a></li>

                <li class="has-dropdown">
                  <a href="#">Services</a>
                  <ul class="dropdown">
                    <li><a href="services.html#printing">Print Media</a></li>
                    <li><a href="services.html">Web Development</a></li>
                    <li><a href="services.html">Promotional Items</a></li>
                    <!-- <li class="active"><a href="#">Active link in dropdown</a></li> -->
                  </ul>
                </li>
            </ul>
          </section>
        </nav>    
  <div class="container">
    <header>

      <div class="row"> 
        <div class="large-3 medium-3 small-6 small-centered columns"> <!-- large centered -->
        <a id="topbutton" href="#" class="button large radius button">Take the tour!</a>

        </div>



      </header>

Answer 1

通过使用firebug调试您的网站，我发现左上角的徽标是宽度为720px的png。虽然你的类.logo宽度：40％，但它会使.title-area 720px宽度打破布局。

尝试添加css：

.title-area { 
  max-width: 40%; //or whatever you need for your layout. px will work there, too
}
.title-area .logo {
  width: 100%;
  height: auto;
}

我还将png重新调整为所需的大小，以节省一些kB下载。

我希望有所帮助。

浏览器大小及以下的网站（zurb foundation）

1 个答案: