2

Susyを使うのはこれが初めてです。ドキュメント / チュートリアルで見たものは本当に気に入っていますが、最初のレイアウト試行で予期しない結果に遭遇しました。

バージョン情報：

>gem install compass-susy-plugin
Successfully installed sass-3.1.2
Successfully installed chunky_png-1.2.0
Successfully installed fssm-0.2.7
Successfully installed compass-0.11.1
Successfully installed compass-susy-plugin-0.9

>ruby --version
ruby 1.9.2p136 (2010-12-25 revision 30365) [x86_64-darwin10.5.0]

以下の画像は、チュートリアルのhtml と screen.scss を逐語的に使用して得た結果を示しています。

why_is_the_h1_off_the_grid_somewhat

ご覧のとおり、h1 要素を調べると、グリッドのすぐ外にあることがわかります。これは正常ですか？

4

2 に答える 2

2

別の同様の質問に対する私のコメントを参照してください。

Susy は、他のグリッド システムとは異なり、単なるグリッド システムではありません。それは非常に特定の目的を満たすように設計されました:内側が流動的なグリッドです。グリッドの作成に使用する単位は、各列ではなくコンテナに適用されます。内部のすべてがパーセンテージで構築されています。あなたが見ているものは正常です。サブピクセルの丸めにより、すべての流体グリッドに当てはまります。これはバグではなく、レスポンシブ Web サイトの構築の一部です。

ピクセル単位の正確なグリッドが必要な場合、Susy は適切なツールではありません。それはすべて、構築しようとしているものに依存します。

ブラウザのサイズを変更して、その動作を確認してください。グリッドがガイドの数ピクセル内にスナップしてフローティングしていることに気付くでしょうが、グリッドはそのままで、水平スクロール バーをトリガーすることはありません。

乾杯！

-e

于 2012-02-15T06:54:44.303 に答える
1

Chrome と Firefox でブラウザ ウィンドウをゆっくりと拡大すると、Firefox よりも Chrome の方がグリッドとテキストが飛び跳ねます。レイアウトに関しては、Firefox の方が正確なようです (レンダリング速度が低下する可能性があります)。

Firefox では、サイズを変更すると、テキスト領域とグリッドのすべてが常に完全に整列し、一緒に移動します。Chrome では、サイズを変更すると、フッター テキストと記事テキスト、グリッド、その他が異なるタイミングで移動するのがわかります。

以下は、Chrome でテキストとグリッドがかなりの数ピクセルずれている例です。

ここに画像の説明を入力

于 2011-08-18T02:36:21.687 に答える