これらのソリューションにはそれぞれ長所と短所があり、マイナスに焦点を当てたいと思います。なぜなら、通常、選択する必要があるこれらの決定のマイナスを反映するのは2つの悪の間にあるからです。
ブレッドボードメッシュの幅を修正
レイアウトは960〜980ピクセルの水平方向に駆動されます（そのため、ほとんどの解像度のほとんどのデバイスでは、すべてが収まります）。
「ゴム」ブレッドボードグリッドウィンドウの幅
繰り返しますが、大きな水平ウィンドウサイズでは、別の問題があります。テキストの行が非常に長くなり、それらを読むことは私たちが望むほどまったく快適ではなくなります。
このソリューションのもう1つの一般的な問題は、大きな水平ウィンドウサイズのサイドマージンが要素の水平方向の寸法とあまり視覚的に一致していないことです。これは、レイアウトを見たときに快適さも増しません。
簡単な解決策を提供したい-水平方向の最小サイズをピクセル単位の固定値に制限し、最大値をウィンドウ幅の割合として相対的にする。 これは、CSS仕様の別の2つのバージョンでは簡単な手段で非常に一般的です。
更新：古典的なラバー効果についてではなく、絶対にすべての解像度に適応することではなく、レイアウトが設計されている合理的な範囲の解像度について話をすることを控えたいと思います。 以下の例では、これは1024ピクセル以上の水平解像度を持つ従来のデスクトップ解像度範囲です。
繰り返しになりますが 、この記事では、すべての種類のデバイスとすべての解像度範囲に対するソリューションについては説明していません。 1つのレイアウトのフレームワーク内では、この問題は原則的に解決されません ;何らかの方法でそれを解決するためには、いくつかのレイアウトが必要になります。 個別に飛んで、カツレツを個別に。
レイアウトコンテナを作成します。
<html> <head> ... </head> <body> <div class="page-container"> ... </div> </body> </html>
シンプルなスタイルコードで発行します。
div.page-container { min-width: 960px; max-width: 75%; margin: 0 auto; padding: 0; }
ただし、水平方向のウィンドウサイズが非常に大きいと、行の長さの問題が再び発生するため、この解決策は誰かにとって十分でないように思われるかもしれません。 これは、同様に単純な追加のトリックによって解決されます：既に説明したものの内部に追加の外部コンテナーを作成し、その最大幅を固定値に制限します（主観的には、1400から1600ピクセルの範囲の値が最適であるように思われます）。 繰り返しますが、CSS 2.0ツールのみを使用します。 このようなソリューションは、最初のコメントで提案されたソースコンテナーの幅のパーセンテージを単純に追加する代わりに、バージョン9までは値の同時表示を理解しないIEでも機能します。
HTMLを補足します。
<html> <head> ... </head> <body> <div class="page-container"> <div class="page-container-inner"> ... </div> </div> </body> </html>
CSSを少し変更します。
div.page-container { max-width: 75%; min-width: 960px; margin: 0 auto; padding: 0; } div.page-container-inner { min-width: 960px; max-width: 1600px; margin: 0 auto; padding: 0; }
ご覧のとおり、このソリューションは非常にシンプルで普遍的であり、あらゆるブロック要素に適用できます。