1.
静的レイアウト (Static Layout) は
従来の Web デザインであり、Web ページ上のすべての要素のサイズは px を単位として使用されます。
HTML5+CSS3シリーズ講座
Ctrip.comホームページ - モバイル
レスポンシブレイアウト 実戦マイクロプラスステーション
キャンパス公式サイト 受験実戦プロジェクト
1. レイアウト機能: ブラウザのサイズに関係なく、Web ページのレイアウトは常にコードが最初に記述されたときのレイアウトに従って表示されます。従来のPCサイトはすべて静的（固定幅）レイアウト、つまりmin-widthが設定されており、この幅より小さい場合はスクロールバーが表示され、この幅より大きい場合はコンテンツが表示されません。中央に配置すると背景が追加されますが、このデザインはPC側と共通です。
2. 設計方法:
PC: 中央寄せレイアウト。すべてのスタイルは絶対幅/高さ (px) を使用し、レイアウトを設計し、画面の幅と高さを調整するときに水平スクロール バーと垂直スクロール バーを使用して覆われた部分を表示します。
モバイル デバイス: モバイル Web サイトを個別に作成し、レイアウトを個別に設計し、wap. や m. などの異なるドメイン名を使用します。
モバイル開発で静的レイアウトを使用する 2 つの方法: (出典: フロー レイアウトとレスポンシブ Web デザインの違いは何ですか?)
(1) ビューポートメタタグで width=320 を設定し、ページの各要素も単位として px を使用します。JS を使用してラベルの初期スケールを動的に変更すると、ページが画面全体を占めるように比例して拡大縮小されます。(「フロントエンド開発 - Web アプリ変更の残り」を参照)
(2) viewportメタタグにcontent"width=640, user-scalable=no"を設定し、ページの各要素も単位としてpxを使用します。640pxは携帯電話の幅を超えるため、ブラウザが自動的に縮小します。ページを全画面表示にします (詳細については、コンテンツ「width=640、user-scalable=no」を参照してから、固定サイズの px デザインを実行しますか? - フロントエンド開発)
利点: このレイアウト方法はデザイナーや CSS ライターにとって最も簡単で、互換性の問題もありません。
欠点: 明らかです。つまり、ユーザーの画面サイズに応じて異なるパフォーマンスを発揮することができません。
現在、ポータルサイトや企業のPC広報サイトの多くがこのレイアウト方法を採用しています。固定ピクセル サイズの Web ページは、固定ピクセル サイズのディスプレイに合わせる最も簡単な方法です。しかし、この方法は将来の Web ページと完全に互換性のある制作方法ではないため、未知のデバイスに適応するためのいくつかの方法が必要です。
2. リキッドレイアウト
リキッド レイアウト (「流体」とも呼ばれます) の特徴は、ページ要素の幅が画面解像度に応じて適応および調整されますが、全体のレイアウトは変更されないことです。代表的なフェンスシステム（グリッドシステム）。
Web ページのメインの分割領域のサイズはパーセンテージを使用します (min-*、max-* 属性で使用)。たとえば、Web ページの本体の幅を 80% に設定し、min-width を 960px に設定します。画像も同様に処理されます (幅: 100%、最大幅は通常、画像自体のサイズに設定され、画像が引き伸ばされたり歪んだりするのを防ぎます)。
1. レイアウト機能: 画面解像度が変わると、ページ上の要素のサイズは変わりますが、レイアウトは変わりません。[これにより、画面が大きすぎたり小さすぎたりすると、要素が正常に表示されなくなります]
2. 設計方法: % パーセンテージを使用して幅を定義し、高さはほとんど px で固定されます。これは、ビューポートと親要素のリアルタイム サイズに応じて調整でき、可能な限りさまざまな解像度に適応できます。多くの場合、max-width/min-width および他の属性と組み合わせて、読み取りに影響を与えるほど大きすぎたり小さすぎたりしないようにサイズ フロー範囲を制御します。
このレイアウト方法は、Web フロントエンド開発の初期の歴史において、さまざまなサイズの PC 画面に対処するために使用されていました (当時は画面サイズの差はそれほど大きくありませんでした)。また、今日のモバイルでも一般的なレイアウト方法です。主な問題は、画面のスケール スパンが大きすぎると、元のデザインに対して小さすぎる、または大きすぎる画面では適切に表示されないことです。幅は%パーセンテージで定義されますが、高さとテキストサイズはほとんどpxで固定されるため、大画面の携帯電話での表示効果は、一部のページ要素の幅が非常に長く引き伸ばされることになりますが、高さとテキストサイズはテキストのサイズは以前と同じですが（つまり、これらのものは「ストリーミング」できません）、表示は非常に不快です。
3. アダプティブ レイアウト (Adaptive Layout) は
、異なる画面解像度のレイアウトを定義すること、つまり複数の静的レイアウトを作成することを特徴とし、各静的レイアウトは画面解像度の範囲に対応します。画面解像度を変更すると、異なる静的部分が切り替わります (ページ要素の位置が変わります) が、各静的レイアウトでは、ウィンドウ サイズを調整してもページ要素は変わりません。アダプティブ レイアウトは、静的レイアウトのファミリーとして考えてください。
1. レイアウト機能: 画面解像度が変わると、ページ内の要素の位置は変わりますが、サイズは変わりません。
2. 設計方法: @media メディア クエリを使用して、さまざまなサイズやメディアのデバイスに応じてさまざまなスタイルを切り替えます。優れた応答範囲設計の下で、適応範囲内のデバイスに最高のエクスペリエンスを与えることができ、実際のレイアウトは同じデバイスの下で固定されます。
4. レスポンシブレイアウト
CSS3 でのメディア クエリ テクノロジの登場により、レスポンシブ デザインの概念が登場しました。レスポンシブ デザインの目標は、すべての端末 (さまざまなサイズの PC、携帯電話、時計、冷蔵庫の Web ブラウザなど) でページが満足のいく結果を表示できるようにすることです。実装は特定の方法に限定されませんが、通常は流動的なレイアウトと柔軟なレイアウトの組み合わせであり、メディア クエリ テクノロジと併用されます。——さまざまな画面解像度に合わせてレイアウトを定義すると同時に、各レイアウトに流動レイアウトの概念が適用され、ウィンドウの調整に応じてページ要素の幅が自動的に調整されます。つまり、それぞれが画面解像度の範囲に対応する複数の流動的なレイアウトを作成します。レスポンシブ レイアウトは、流体レイアウトとアダプティブ レイアウトの設計概念を融合したものだと考えてください。
応答性は、優れたページ レイアウトのほぼ標準となっています。
1. レイアウト機能: 各画面解像度でのレイアウト スタイルがあり、要素の位置とサイズが変わります。
2. デザイン方法: メディア クエリ + ストリーミング レイアウト。通常、レイアウトには @media メディア クエリと相対的なレイアウト単位のグリッド システム (Grid System) が使用されますが、実際には、包括的な応答性やフローなど、CSS を通じて 1 つの Web ページ上で異なるスタイルを異なるデバイスに返す技術の総称です。 。
利点: PC およびモバイル端末に適応し、十分な忍耐力があれば、効果は完璧になります。
欠点: (1) メディア クエリは制限されています。つまり、メディア クエリは列挙可能であり、主流の幅と高さにのみ適応できます。(2) 十分な画面サイズに合わせるには作業負荷が小さくなく、設計にも複数のバージョンが必要です。
要約:
レスポンシブと自己アダプティブは原理的に似ています。どちらも検出デバイスです。デバイスに応じて異なる CSS が使用され、CSS は固定幅ではなくパーセンテージです。違いは、レスポンシブ テンプレートが異なることです。見た目は異なります。デバイス上で表示スタイルが変更されますが、自己適応は行われません。すべてのデバイスは一連のテンプレートのように見えますが、長さや画像が小さくなり、それに基づくものではありません。フローモードでは幅が一定以上の場合の表示方法と幅が一定以下の場合の表示方法が異なりますが、表示方法は本機と同じです。水流、部分ごとの負荷、および静的は固定幅を使用します。
ストリーミング レイアウトは、同様のデバイスの異なる解像度間の互換性を解決するために使用されます (一般に、解像度の差は小さい)。レスポンシブは、異なるデバイスと異なる解像度間の互換性の問題を解決するために使用されます (通常は PC を指し、デバイス間の解像度の違いが大きい)タブレット、携帯電話など）。
レスポンシブ レイアウトの実装方法: レスポンシブ レイアウト デザインを捨てて、Web ページのレスポンシブ レイアウトが誕生しました。
5. 柔軟なレイアウト（レム/エムレイアウト）
参考：流動的なレイアウトとレスポンシブ Web デザインの違いは何ですか?
1. rem と em の違い: rem と em は、異なる Web フォント サイズの表示に応じて生成されます。このうち、em は親要素を基準とするため、実際のアプリケーションでは不都合が多くなりますが、rem は常に html のサイズ、つまりページのルート要素を基準とします。
2. 相対レイアウトには em または rem 単位を使用します。これは、% パーセンテージに比べてより柔軟です。同時に、em は親要素に対して相対的なため、ブラウザのフォント サイズ調整やスケーリングなどの通常の表示をサポートできます。そして昇進もしていない。[中国のサイトが Web ページを作成する場合、誰もが一貫した効果を確認できるように、CSS を使用してフォント サイズを定義することに慣れています。Netease や Sohu などのポータル サイトを含むほとんどのサイトは、絶対単位 px (ピクセル) を使用します。ただし、Web サイトの使いやすさを考慮すると、フォント サイズは可変である必要があり、視力の悪い人によっては、ページの内容をはっきりと見るためにフォントを拡大する必要がある場合があります。しかし、ブラウザ市場の大部分を占めるIEでは、pxを単位としたフォントサイズを調整することができません。外国人はWebサイトの使いやすさを重視しており、すでにフォント単位としてemを使用している海外Webサイトも少なくありません。]
3. このタイプのレイアウトの特徴は、テキストを囲む各要素のサイズが em/rem 単位であるのに対し、ページの主要な分割領域のサイズはパーセンテージまたは px のままであることです (「フロー」と同じ)レイアウト」または「静的/固定レイアウト」)。この場合、初期のブラウザーはページ全体の拡大縮小をサポートしておらず、Web ページ内のテキスト サイズの拡大のみをサポートしていました。em/rem を単位として使用すると、テキストを囲む要素のスケールをテキストのスケールに合わせることができます。
4. ブラウザのデフォルトのフォントの高さは通常 16px、つまり 1em:16px ですが、1:16 という比率は計算が不便で、単位 em/rem をより直感的にするために、CSS ライターはページを設定することがよくあります。たとえば、フォントの制御に rem を使用することを選択した場合、ブラウザのデフォルトのフォント サイズは 16px*62.5%=10px であるため、最初にルート ノード html のフォント サイズを設定する必要があります。 。このように、1remは10pxとなり、計算に便利です。
em 変換を容易にするために本文のフォント サイズを 62.5% に設定します。
フォント サイズに相対単位 (em) を使用したい場合は、本文の font-size プロパティに 62.5% を宣言すると、px から em への変換が容易になります。 。このようにすることで、em に変換することは、px 値を 10 で割ることになります (例: 24px = 2.4em)
。 10px;}呢？
一部のブラウザーはデフォルトで 16 ピクセルに設定されていないため、またはユーザーがブラウザーのデフォルトのフォント サイズを変更しているためです (ブラウザーの解像度、視力、習慣などの要因により)。10 ピクセルに設定すると、これらのブラウザーでの効果に確実に影響するため、必要な 10 ピクセルを取得するには、ほとんどのユーザーのデフォルトの 16 をベース * 62.5% として使用するのが最善です。
html {font-size: 62.5%;/ 10 ÷ 16 × 100% = 62.5% /}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/ 2.4 × 10 ピクセル = 24 ピクセル/}
実際のプロジェクトが font-size: 62.5% に設定されている場合、Chrome は 12 ピクセルより小さいフォントをサポートしていないため、問題が発生する可能性があります。また、計算が 12 ピクセルより小さい場合、デフォルトで 12 ピクセルが計算されるため、結果として em が不正確になります。 /rem クロムの計算。
この現象については、HTML フォントを 100 ピクセル、本文を 16 ピクセルに設定して、0.1rem が 10 ピクセルになるようにしてみてください。本文のフォントはデフォルト サイズのままであり、これは、要素のデフォルトのフォント サイズには影響しません。設定されていません。
5. em/rem を使用してサイズを定義するもう 1 つの利点は、フォント単位でのインデント/パディング、またはマージン/ブラウザのフォント サイズ設定に適していることです (em/rem はフォント サイズに対して同期して変更されるため)。例: p{ text-indent: 2em; }
6. レム単位を使用した柔軟なレイアウトはモバイル側でも非常に人気があります。
ツール ViewtoREM: REM への PX 変換 (自動前処理) rem の定義: ルート要素のフォント サイズ、rem はルート要素を基準にしてフォント サイズを設定します。つまり、次に従ってルート要素のフォント サイズを設定するだけで済みます。私たち自身のニーズに合わせて基準値を決定します。rem、em、pxの違い:
px: ピクセル、より正確な単位ですが、レスポンシブレイアウトを行うのは簡単ではありません
em: 親ノードのフォントサイズを基準点として使用し、標準は統一されていません。 REM は、Mozilla Firefox 3.6 以降、Apple Safari 5 以降、Google Chrome、IE9 以降、および Opera11 以降のブラウザをサポートしています。IE6～8では対応しておりません。
異なるサイズの画面の場合、CSS を記述する前に画面幅を一律 640px と仮定することができます (もちろん、画面幅を 320px と仮定することもできます)。この時点で、html 要素の font-size を 40px (例として同じ) に設定し、あらゆる場所 (要素サイズ、テキスト サイズ) の単位として rem を使用し、メディア クエリまたは JS を使用して動的に画面のサイズに応じて制御する HTML 要素のフォント サイズ (特定の画面サイズでは、HTML 要素のフォント サイズの値を設定する必要があります。これは、設計者とプログラマが検討を重ねて決定します)このソリューションを使用する場合、関連する CSS メディア クエリ コードを次に示します (これは、サイズが rem で定義されているすべての要素のサイズを自動的に変更できます (CSS ライターが頭の中で変換する計算プロセスは em よりもはるかに簡単です)。
実際、 View Code は
モバイル側でいわゆるフレキシブル レイアウトを使用しますが、これは比較的消極的です。モバイル端末の柔軟なレイアウトが人気の理由は、ページの各要素のサイズや文字サイズを（画面サイズに合わせて）調整するのにレム単位の方が便利だからです。実際、vw や vh などの新進気鋭のユニットを使用すると、完璧な流動的なレイアウト (高さとテキスト サイズを「流動的」にすることができます) を実現でき、伸縮性のあるレイアウトは必要なくなります。詳細については、ビューポート関連ユニット vw、vh... の導入と実際の適用シナリオを参照してください。
以下のメリット・デメリット参考：レスポンシブデザインとREMレイアウトの比較（怪しい）
利点: 理想的な状態は、すべての画面のアスペクト比が元の設計のアスペクト比と同じか、類似しており、完全に適合していることです。
欠点: この種の rem+js は幅のみに適応しますが、高さには適応しません。比較的高い高さまたは要素の間隔を必要とする一部のデザインでは、このレイアウトはあまり意味がありません。幅のみの適応の場合はレスポンシブデザインをお勧めします。
レスポンシブ レイアウトとエラスティック レイアウトの比較:
レスポンシブ レイアウト: ブラウザの幅を変更すると、それに応じて「レイアウト」が変更され、静的ではありません。たとえば、ナビゲーション バーは、大きな画面では水平に配置され、小さな画面では垂直に配置され、画面上ではメニューとして非表示になります。つまり、十分な忍耐力があれば、各画面の下に適切なレイアウトと完璧な効果が得られるはずです。
rem レイアウト: ブラウザーの幅を変更すると、ページ上のすべての要素の高さと幅が比例して拡大縮小されます。つまり、ナビゲーションは大きな画面では水平ですが、小さな画面でも水平のままですが、小さくなります。
結論は：
1. PC 側でのみ作業する場合は、静的レイアウト (固定幅) が最適な選択です;
2. モバイル側で作業する場合で、デザインに高い高さと要素の間隔が必要ない場合は、伸縮性のあるレイアウト ( rem+js) が最適です css の 1 コピー + js の 1 コピーでフォント サイズを調整します;
3. PC とモバイルに互換性があり、要件が高い場合は、依然としてレスポンシブ レイアウトが最良の選択です。デザインはさまざまな高さと幅に従って設計されており、メディアクエリに従ってさまざまなレイアウトを応答的に実行します。