0

何らかの理由で、スタイル設定された div は自分の値または値を.tile尊重せず(どちらかわかりません)、これらの div は参照グリッドに正しく整列していません。$gutter-width$column-width+susy-grid-background

$columns-width以下のスクリーンショットでは、正方形のシアンの div が値に付着していないことがわかり$gutter-widthます。その上、1 つの行にこれらのシアンの div が 4 つあるはずですが、4 番目の div は 2 番目の行にノックダウンされています。

なぜこうなった？これはサブピクセルの丸めの問題ですか?

ここに画像の説明を入力

_base.sassコード

/* Susy Settings */

$total-columns  : 5             
$column-width   : 4em            
$gutter-width   : 1em            
$grid-padding   : $gutter-width  

$desktop : 14

// Susy-grid-background override to draw out horizontal lines
=susy-grid-background       
  +grid-background($total-columns, $column-width, $gutter-width, $base-line-height, $gutter-width, $force-fluid: true)

style.sassコード

@import compass
@import susy
@import normalize
@import base


$base-font-size: 18px
$base-line-height: 30px
+establish-baseline

ul
  background-color: rgb(111, 50%, 250)

li
  background: rgba(200,50,0,.2)
  text-align: right

a
  background: rgba(0,220,0,.2)
  display: block

h1
  +adjust-font-size-to(90px)
  +adjust-leading-to(4, 90px)
  +leader(2, 90px)
  background: rgba(0,20,200,.3)

h1#logo
  +adjust-font-size-to(30px)
  +adjust-leading-to(2, 30px)
  +leader(0, 30px)

h2
  +adjust-font-size-to(25px)
  +adjust-leading-to(1, 25px)
  background: rgba(250,250,0,.2)

p
  +leader(1)
  +trailer(1)
  background: rgba(0,220,0,.2)

.page, header, .pagenav, .main, .pagefoot
  +transition(all .3s ease)

.page                                
  +container($total-columns, $tablet, $desktop)
  +susy-grid-background


/* BREAKPOINTS */

+at-breakpoint($desktop)
  .page
    +susy-grid-background

  header
    +container
    +susy-grid-background
    background: rgba(250,0,0,.2)
    position: fixed
    left: 0
    right: 0

    h1#logo a
      +hide-text
      float: right
      +span-columns(2)
      background: rgba(200,10,250,.1)

    .pagenav
      clear: both
      float: right
      +span-columns(2)
      background: rgba(0,140,250,.3)

  .main
    +span-columns(12 omega)
    +leader(2)
    background: rgba(1,240,200,.3)

    .tile
      +span-columns(3, 12)
      +adjust-leading-to(9)
      +trailer(1)
      background: #0f6   

  .pagefoot
    background: rgba(45,0,120,.3)
    +span-columns(12,12)
4

1 に答える 1

0

エリックのおかげで、私は彼が以前ここで答えた古い同様の質問に言及されました:

Susy レイアウトの奇妙なずれ

Susy グリッドは (デフォルトで) 内部が流動的です。すべての流体グリッドは、ブラウザ側である程度のサブピクセルの丸めの影響を受けます。とはいえ、主に表示されているのは、背景グリッドのサブピクセルの丸めです。これは通常、実際の要素の丸めよりも悪いです。これはドキュメントに記載されています-グリッドの背景は大まかなガイドであり、ピクセル単位の正確な定規ではありません。

Susy には分離オプションもあり、サブピクセル エラーの複合化を防ぐために使用できます。

したがって、この特定の問題については、次のように置き換え+span-columns(3,12)た+isolate-grid(3, 12)ので、最終的な.tilesassは次のようになります

.tile
  +isolate-grid(3, 12)
  +adjust-leading-to(9)
  +trailer(1)
  background: #0f6

そして、これが結果です

ここに画像の説明を入力

于 2013-05-30T14:54:29.297 に答える