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の間隔は効果を発揮していないようです。右側に幅が 1 列のタグがあり、左側に幅が固定されているタグが必要です。何か案は？.logonav.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。上記以外の重要な情報です。しかし、あなたはこれを確認したいかもしれません.Susyのオメガで4列から3列に変更すると失敗します.それはあなたの質問に関連していると思います.

于 2013-04-20T00:34:22.320 に答える