0

私は何年もウェブサイトを開発してきましたが、数年の休憩の後、再びそれに戻ってきたので、これはグリッドとレスポンシブデザインを検討するのに理想的な時期であると判断しました. ここ数日、私は CSS グリッドとその背後にある理論を読んだり、実験したりしてきました。私は、ブレークポイントごとに可変 % マージンを持つ SCSS で独自の開発を始めました (モバイルがガターをつぶさないように)。

私がこれまでに学んだことは、グリッドについてかなり複雑な意見を残しました. 固定グリッドは反応が悪いように見え、流動グリッドは丸め誤差に悩まされる可能性があり、過度に複雑に見えないものもあります。私は理論的にはグリッドを愛していますが、実際には完全には納得していません。

しかし、余白の代わりにガターにパディングとボーダーボックスを使用することで、ほぼ完璧に見える流動的な CSS グリッドを作成する方法に出くわしました。ガターは比例したままで、丸め誤差が最小限に抑えられ、設計の柔軟性が向上する可能性があります。これまでのところ、私が目にすることができる唯一の欠点は、古い IE を修正する必要があることです (その場合、異常はありません)。

しかし、この方法はあまり広く採用されていないようです. 上にリンクされた記事を除いて、私が遭遇したすべての記事と流体グリッドシステムは、ガターのパディングの代わりにマージンを使用しています (丸め誤差の問題に取り組んだのはそのうちの 1 つだけです)。

では、なぜこの方法がこれほど多作なのだろうか? そして、ガターのマージンの代わりにパディング/ボーダーボックスを使用することの難点は何ですか?

4

1 に答える 1

1

あなたが求めているのは、基本的に、人々が を使用しない理由ですよねbox-sizing: border-box?

推測しかできません。古いバージョンの IE をサポートしたいからかもしれません。古いモジュールはすべてデフォルトのボックス モデルcontent-boxで動作するように書かれていて、それを書き直すことができないからかもしれません。あるいは、単純な無知が原因かもしれません。より大きな CSS グリッドの場合、より多くの無意識の聴衆にアピールすることができます。

いずれにせよ、欠点はほとんど関係ありません。ボックス モデルを変更して、値を加算するのではなくborder、padding値を減算widthするようにします。heightつまりwidth、heightデフォルトのボックス モデルを使用して記述されたものは、要素に含まれる可能性のあるパディングや境界線を考慮しないように書き直す必要がある場合があります。本当にそれだけです。

ブラウザのサポートは IE8までさかのぼり、IE6 と IE7 用のポリフィルさえあるので、心配する必要はありません。

私が気付いた 1 つの癖はborder-box、非正方形の画像に境界線またはパディングを適用すると、設定しない限り、画像がわずかに歪んでしまうことheightですauto。しかし、RWD のこの時代に、まだこれを行っていない人がいるでしょうか?

数年すれば、誰もborder-boxが content-box.

于 2013-05-31T10:59:52.783 に答える