0

现在，我几乎有了一个响应式标题，因为我最初的问题是如何使标题响应式？. 我仍然有点坚持正确的元素宽度。

我正在使用以下 Susy-Compass 设置：

.mod-header
  @include container ($total-columns, $mobile-to-medium, $medium-to-large)  
  border: 2px red solid
  +rem('height', 70px)

  @include susy-grid-background

  @include at-breakpoint($mobile-to-medium $columns-medium $medium-to-large)
    @include susy-grid-background

  @include at-breakpoint($medium-to-large)
    @include susy-grid-background

   .logo
     float: left
     border: 1px red solid
     +rem('margin', 20px 0)
     +data-uri-bg('logo.png')

   nav
     float: right
     +rem('margin', 20px 0)
     font-weight: 600
     @include at-breakpoint($mobile-to-medium $columns-medium)
       border: 1px blue solid
       @include span-columns(2)
       .tour
         display: none

       .action
         border: 1px green solid
         @include span-columns(1)

这映射到以下呈现的布局：

在此处输入图像描述

现在， 的效果span-columns似乎没有生效，以及从.logo到的间距nav。我想在右边有一个宽度为 1 列.action的标签，而左边有一个固定的宽度。有任何想法吗？.find.logo

编辑：

Susy 的屏幕设置是：

$mobile-to-medium: 400px
$medium-to-large:  800px

$columns-small:    1
$columns-medium:   8
$columns-large:    12

$column-width   : 3em            // each column is 4em wide
$gutter-width   : 0.4em            // 1em gutters between columns
$grid-padding   : 0              // grid-padding equal to gutters

$total-columns: $columns-small
4

1 回答 1

1

我认为您需要在断点处重置列。我不知道你的 , , 和 的mobile-to-medium价值columns-medium是medium-to-large多少total-columns。这是上面未列出的重要信息。但是你可能想检查这个Change from 4 to 3 columns with omega with Susy failed，我认为这与你的问题有关。

于 2013-04-20T00:34:22.320 回答