html - 网站 foobared 中等浏览器大小及以下 (zurb foundation)

Question

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

这是一些顶部栏，我还有一个容器，它不是网格的一部分，可能会把东西扔掉，还有一个奇怪的标题元素，我为它编写了一些 css，如果删除它，它就会像出色地。基本上，我的代码有点乱，一旦我弄清楚在调整浏览器大小时是什么导致了很多这样的困惑，我会尽可能地清理它。 (ps.要查看其余代码和css，请访问www.omegadesignla.com并检查element，或者让我粘贴特定部分，谢谢!)

 <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 调试您的站点，我看到左上角的 Logo 是一个宽度为 720 像素的 png。虽然你有 class .logo width: 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 以供下载。

希望对您有所帮助。