CSSのレイアウト方法にはどのようなものがあるのでしょうか？

css レイアウト方法には、1. 静的レイアウト (フロート レイアウトおよび絶対レイアウト)、2. アダプティブ レイアウト、3. 流動レイアウト (左固定、右アダプティブ、左右固定幅、中央アダプティブ、Holy Grail) があります。レイアウト、両翼レイアウト); 4. レスポンシブなレイアウト; 5. 柔軟なレイアウト。

#このチュートリアルの動作環境: Windows7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

cssから現在の大きなカテゴリにまとめられるまでの開発を行ってきましたが、ご存知の実装方法は具体的には以下のような実装になるかもしれません。

##静的レイアウト

• アダプティブ レイアウト
• フローティング レイアウト (パーセンテージ レイアウト%とも呼ばれます)
• レスポンシブ レイアウト: メディア クエリ
• フレキシブル レイアウト (レム/エム フレックス レイアウト)
1 . 静的レイアウト

最も伝統的なレイアウト方法で、Web ページ内のすべてのサイズが単位として px で表示され、min-width が設定されます。幅がこの幅より小さい場合、スクロール バーが表示されます。この幅より大きい場合は、コンテンツが中央に配置され、背景が追加されます。

実装方法:

PC:

中央配置、すべてのスタイルは絶対幅/高さ (px) を使用し、画面の幅と高さを調整するときにレイアウトを設計します。水平および垂直スクロール バーを使用して、隠れている部分を表示します。

モバイル デバイス:

さらに、モバイル Web サイトを作成し、別のレイアウトを設計し、wap などの異なるドメイン名を使用します。またはメートル。

利点: 以前の CSS2 レイアウト方法を使用すると、レイアウトがシンプルになり、互換性の問題が発生しません。

デメリット: 携帯電話ではまともに表示できず、PC ページは携帯電話では使用できないため、表示するには別のレイアウトを記述する必要があります。

#実践ケース:

#フロート レイアウト

絶対レイアウト

• 2. アダプティブ レイアウト

は、異なる画面上の複数の静的レイアウトで構成されているように見えます。 アダプティブ レイアウトは、さまざまな画面解像度に応じてさまざまなレイアウトを定義します。画面解像度を変更すると、異なる静的レイアウト間で切り替えることができます (ページ要素の位置が変更される場合があります)。ただし、各静的レイアウトでは、ウィンドウ サイズを調整してもページ要素は変わりません。アダプティブ レイアウト ページ内の要素の位置が変更されます。これは、流動的なレイアウト

で大きな画面スペースの利用率が低いという欠点を解決する優れた解決策です。

画面解像度が変更されると、ページ上の要素の位置は変更されますが、サイズは変更されません。 実践事例: Baidu 検索ホームページ

(学習ビデオ共有:

css ビデオ チュートリアル

)

3. フロー レイアウト

Web ページの主要な分割領域の

サイズは、パーセンテージ (min-* および max-* 属性とともに使用) を使用して、さまざまな画面のレイアウト形式を設定します。変更すると、異なるレイアウトが表示されます。つまり、この画面では要素ブロックはこの場所にありますが、その画面では要素ブロックはその場所に表示されます。レイアウトが変わるだけで、要素は変わりません。これは、異なる画面上の複数の静的レイアウトで構成されているように見えます。

流体レイアウトの特徴は、画面が変化してもページのレイアウトは大きく変化せず、適応および調整できることであり、これはアダプティブ レイアウトを補完するものにすぎません。

% パーセンテージを使用して幅を定義し、高さはほとんど px で固定されます。視覚領域 (ビューポート) と親要素のリアルタイム サイズに応じて調整して、さまざまな解像度に適応できます。できるだけ。 max-width/min-width などのプロパティは、大きすぎたり小さすぎたりして読み取りに影響を与えることを避けるために、サイズ フローの範囲を制御するためによく使用されます。 このレイアウト方法は、Web フロントエンド開発の初期の歴史において、さまざまなサイズの PC 画面

に対応するために使用されていました (当時の画面サイズの差はそれほど大きくありませんでした)。

も使用されます今日のモバイル開発では一般的に使用されているレイアウト方法 ですが、 明らかな欠点があります :主な問題 は、画面サイズ スパンが大きすぎると、画面サイズが大きすぎることです。元のデザインに比べて小さすぎる、または大きすぎるため、正常に表示できません。幅は%を使用して定義されますが、高さとテキストのサイズはほとんどpxで固定されているため、大画面の携帯電話での表示効果は、一部のページ要素の幅が非常に長く引き伸ばされることになりますが、高さとテキストのサイズは元のものと同じです。同じです (つまり、これらのものは「流れる」ようにはなりません)画面解像度が変更されると、ページ上の要素のサイズは変更されますが、レイアウトは変更されません.主な実践例:

左側は固定、右側は適応型

• 左側と右側固定幅は中央で適応可能です。

• 聖杯レイアウト

• ダブルフライングウィングレイアウト

4. レスポンシブ レイアウト

レスポンシブ デザインにより、携帯電話やタブレットでの Web サイトの閲覧や読書のエクスペリエンスが向上します。画面サイズが異なると、ユーザーに表示される Web ページ コンテンツも異なります。メディア クエリ を使用すると、画面のサイズを検出し (主に幅を検出)、さまざまな CSS スタイルを設定してレスポンシブ レイアウトを実現できます。主に CSS メディア クエリに依存します。

各画面解像度にはレイアウト スタイルがあり、要素の位置とサイズが変わります。

実践的なケース メディア クエリ

5. 柔軟なレイアウト

• ##rem/em
• flex レイアウト

プログラミング関連の知識については、

プログラミング ビデオをご覧ください。 ！

以上がCSSのレイアウト方法にはどのようなものがあるのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。