ホームページ > 記事 > ウェブフロントエンド > CSSのレイアウト方法にはどのようなものがあるのでしょうか?
css レイアウト方法には、1. 静的レイアウト (フロート レイアウトおよび絶対レイアウト)、2. アダプティブ レイアウト、3. 流動レイアウト (左固定、右アダプティブ、左右固定幅、中央アダプティブ、Holy Grail) があります。レイアウト、両翼レイアウト); 4. レスポンシブなレイアウト; 5. 柔軟なレイアウト。
#このチュートリアルの動作環境: Windows7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
PC:
中央配置、すべてのスタイルは絶対幅/高さ (px) を使用し、画面の幅と高さを調整するときにレイアウトを設計します。水平および垂直スクロール バーを使用して、隠れている部分を表示します。モバイル デバイス:
さらに、モバイル Web サイトを作成し、別のレイアウトを設計し、wap などの異なるドメイン名を使用します。またはメートル。利点: 以前の CSS2 レイアウト方法を使用すると、レイアウトがシンプルになり、互換性の問題が発生しません。
デメリット: 携帯電話ではまともに表示できず、PC ページは携帯電話では使用できないため、表示するには別のレイアウトを記述する必要があります。#実践ケース:
#フロート レイアウト
絶対レイアウト
画面解像度が変更されると、ページ上の要素の位置は変更されますが、サイズは変更されません。 実践事例: Baidu 検索ホームページ
(学習ビデオ共有:css ビデオ チュートリアル) Web ページの主要な分割領域の
% パーセンテージを使用して幅を定義し、高さはほとんど px で固定されます。視覚領域 (ビューポート) と親要素のリアルタイム サイズに応じて調整して、さまざまな解像度に適応できます。できるだけ。 max-width/min-width などのプロパティは、大きすぎたり小さすぎたりして読み取りに影響を与えることを避けるために、サイズ フローの範囲を制御するためによく使用されます。 このレイアウト方法は、Web フロントエンド開発の初期の歴史において、さまざまなサイズの PC 画面
に対応するために使用されていました (当時の画面サイズの差はそれほど大きくありませんでした)。も使用されます今日のモバイル開発では一般的に使用されているレイアウト方法 ですが、 明らかな欠点があります :主な問題 は、画面サイズ スパンが大きすぎると、画面サイズが大きすぎることです。元のデザインに比べて小さすぎる、または大きすぎるため、正常に表示できません。幅は%を使用して定義されますが、高さとテキストのサイズはほとんどpxで固定されているため、大画面の携帯電話での表示効果は、一部のページ要素の幅が非常に長く引き伸ばされることになりますが、高さとテキストのサイズは元のものと同じです。同じです (つまり、これらのものは「流れる」ようにはなりません)画面解像度が変更されると、ページ上の要素のサイズは変更されますが、レイアウトは変更されません.主な実践例:
左側は固定、右側は適応型レスポンシブ デザインにより、携帯電話やタブレットでの Web サイトの閲覧や読書のエクスペリエンスが向上します。画面サイズが異なると、ユーザーに表示される Web ページ コンテンツも異なります。メディア クエリ を使用すると、画面のサイズを検出し (主に幅を検出)、さまざまな CSS スタイルを設定してレスポンシブ レイアウトを実現できます。主に CSS メディア クエリに依存します。
各画面解像度にはレイアウト スタイルがあり、要素の位置とサイズが変わります。
実践的なケース メディア クエリ
プログラミング ビデオをご覧ください。 !
以上がCSSのレイアウト方法にはどのようなものがあるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。