CSSのレイアウト方法にはどのようなものがあるのでしょうか？-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2023-01-05 16:13:13

オリジナル

11127 人が閲覧しました

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

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

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

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

##静的レイアウト

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

最も伝統的なレイアウト方法で、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 メディアクエリに依存します。