CSS 弾性流体レイアウトとさまざまなコンテンツ表示の組み合わせ

現在、ユーザーのモニターがますます大型化しているため、以前の 1024*768 の横幅のレイアウトは、大きな画面を使用するユーザーにとって、一見したところ画面の両側に空きスペースがあると、ますます時代遅れになりつつあります。無駄です。Web デザイナーとして、このグループのユーザーに優れたユーザー インターフェイスを提供する責任があります。

もちろん、この画面の無駄を減らすには、画面スペースを最大限に活用し、解像度に関係なくコンテンツを全画面に表示できる弾性流体レイアウトを使用することが最善の解決策です。しかし、さまざまな制限のため、現在の Web ページはまだ、流動的で弾力性のあるレイアウトを完全に採用する準備ができていません (特にブラウザー メーカーによる標準の無分別な踏みつけや CSS 標準の不完全なサポートなど)。ユーザーとメーカーの間の仲介者として、私たちは両者のギャップに適合する精神でしか対応できません。そこで、過渡的な解決策として、エラスティック + 固定幅レイアウトというレイアウトがあります。

ここで言う弾力性とは、背景が画面の幅に適応することを意味し、固定幅とは、ワイドスクリーンでもナロースクリーンでもテキストコンテンツを自動的に中央に配置できることを意味します。さまざまなサイズ解像度のユーザーのニーズを満たすために、亀裂の中でも生き残ります。以下に示すデザインは代表的な例です。

早速、このようなレイアウト構造を作成してみましょう。

まず構造層を構築します。

構造レイヤーを分析します。Web ページには通常、ヘッダー、コンテンツ領域、フッターという 3 つの部分が含まれます。ヘッダーとコンテンツはラッパーと呼ばれるコンテナー レイヤーに配置され、フッターはラッパーと呼ばれます。なぜこのように設計されているのでしょうか? コンテンツ領域が 1 画面に満たない場合でも、このフッターを必ず下部に配置したいのです。

ラッパーとフッターの 2 つのコンテナーの幅を 100% に設定し、画面の幅に自動的に適応するようにします。また、ヘッダー領域の幅を 100% に設定します。このようにして、ヘッダーとフッターに水平方向に並べて配置できる画像を挿入することができ、大きな画面でヘッダーとフッターの背景が画面スペース全体を水平方向に埋めることができます。

本文の内容については、解像度が高くなると中央に表示し、両側に余白を残すのが一般的な考え方です。ヘッダー領域は 100% の幅に設定されているため、ヘッダーに別のコンテナー レイヤーのインヘッダーを追加します。これは、実際のヘッダー テキスト コンテンツのキャリアとして機能し、960 ピクセルなどの固定幅値を設定します。そしてそれを中心に置きます。

このようにして、ページ ヘッダーのメイン テキストをヘッダーの上位レイヤーに配置して、オーバーレイを形成できます。ヘッダー効果。大きな画面解像度を自動的に調整できます。

同様に、フッターもこのメソッドを使用して実装できます。

上の構造レイヤーでは、中央のコンテンツ領域ではこのメソッドを使用しませんでしたが、少し変更を加えました。コンテンツ領域には埋め込まれたコンテナがなく、コンテナが 1 つだけあることがわかります。高解像度でテキストの両側が空にならないようにしたい場合はどうすればよいでしょうか? もちろん、ヘッダー メソッドとフッター メソッドを使用して、コンテンツに div を追加することもできます。もちろん、ネストを減らすために、回避策を使用できます。本文の背景に非常に大きな画像を追加し、background-position を使用して画像を配置して中央に配置し、コンテンツ領域の両側の画像が表示されるようにすることができます。

このブログはその特殊なケースですが、このブログの両側の写真を高解像度で見てからウィンドウを縮小すると、両側の写真の小さな領域だけが 1024* で表示されていることがわかります。 768、本文は常に中央に表示されます。

効果を実証するために、他の色調整を追加します。最終的なスタイルは次のとおりです。