Responsive design 如何使标题响应？

我有以下HTML：

<div class='layout-wrap'>
  <div class='mod-header'>
    <a class='logo' href="#"></a>
    <nav>
      <a class="action" href="#">Join now</a>
      <ul class="tour">
        <li><a href="#">item 1</a></li>
        <li><a href="#">item 2</a></li>
        <li><a href="#">item 3</a></li>
      </ul>
      <ul class="search">
        <li><a class="find" href="#">search</a></li>
      </ul>
    </nav>
  </div>
</div>

什么是最小响应布局解决方案（如Susy），以便：

• a、 徽标始终可见（也适用于小屏幕）
• a、 操作始终可见（也适用于小屏幕）
• a、 发现总是可见的
• ul.tour对于小屏幕是隐藏的

不确定这是否容易实现，但知道是否可行会很有帮助

编辑：

狭义问题：如何防止小问题导致右侧导航中断，并隐藏ul.tour

苏西·萨斯：

.mod-header
  @include container
  clear: both
  border: 2px red solid
  +rem('height', 70px)

  .logo
    text-indent: -9999px
    float: left
    +rem('width', 120px)
    +rem('height', 29px)
    +rem('margin', 20px 0)
    border: 2px blue solid
    +data-uri-bg('logo.png')

  nav
    @include span-columns(4,12)
    border: 2px blue solid
    float: right
    +rem('margin', 20px 0)
    +rem('height', 29px)

    ul
      li
        float: left
        +rem('margin', 0 8px)

---

这是很容易做到的，但是任何答案都需要很多关于你想让它看起来和移动的决定。有太多不同的方法可以做到这一点。如果你遇到更具体的问题，为什么不试一下，问一些问题呢？对不起，我这里确实有几个问题。我把它缩小到导航部分的第一个问题。我相信你可以隐藏一个元素（

display:none；

是一种方式）。问题真的是关于如何使用Susy的媒体查询来控制项目何时隐藏和何时显示？这是您的文档。为了保持线条的分界，您必须确保元素的总和永远不会超过100%。隐藏

.tour

后，您还剩下两个项目，因此可以为每个项目指定50%的宽度，或者使用Susy为每个项目指定4列中的2列。

.mod-header
  @include container
  clear: both
  border: 2px red solid
  +rem('height', 70px)

  .logo
    text-indent: -9999px
    float: left
    +rem('width', 120px)
    +rem('height', 29px)
    +rem('margin', 20px 0)
    border: 2px blue solid
    +data-uri-bg('logo.png')

  nav
    @include span-columns(4,12)
    border: 2px blue solid
    float: right
    +rem('margin', 20px 0)
    +rem('height', 29px)

    ul
      li
        float: left
        +rem('margin', 0 8px)