アダプティブとレスポンシブの違いは何ですか?アダプティブとレスポンシブの違いの概要

この記事の内容は、アダプティブとレスポンシブの違いについてです。アダプティブとレスポンシブの違いについての説明は、困っている友人の参考になれば幸いです。

まえがき

よくある質問として「アダプティブデザインとレスポンシブデザインの違い」について、より分かりやすくご紹介します。 。

ビューポート

最初に概念を理解しましょう (以下によく登場します):
ビューポート: 情報を閲覧するためのユーザーの画面のサイズ (各ビューポートの後に実際のビューポートが続きます) ユーザー)

コンセプト:

レスポンシブ デザイン:

[百科事典]: レスポンシブ デザインは、2010 年 5 月に Ethan Marcotte によって導入されました。1 月に提案されたコンセプトです。一言で言えば、Web サイトは端末ごとに特定のバージョンを作成するのではなく、複数の端末と互換性を持たせることができるということです。このコンセプトは、モバイル インターネット ブラウジングを解決するために生まれました。

アダプティブ デザイン

[百科事典]: アダプティブ デザインとは、さまざまなサイズの端末デバイスに Web ページを適応的に表示できるようにする新しい Web デザイン手法と手法を指します。 。

違い

• より直感的な違いは次のとおりです。 適応性: 1 つのインターフェイスに対して複数のインターフェイスのセットを開発する必要があります。

• アダプティブ デザイン ビューポートの解像度を検出することで、現在アクセスされているデバイスが PC、タブレット、携帯電話のいずれであるかを判断し、それによってサービス層と異なるものを返す ページ;レスポンシブ デザインは、ビューポートの解像度を検出し、さまざまなクライアントに対してクライアント側でコード処理を行うことによって、さまざまなレイアウトとコンテンツを表示します。

• アダプティブ ページに行われる画面適応は特定の範囲内です。たとえば、PC (>1024)、タブレット (768) 用の一連の適応です。 -1024) ) 1 セットの適応、携帯電話用の 1 セットの適応 ( レスポンシブ 1 セットのページがすべて適応されます。 (ご想像のとおり、レスポンシブ デザインはアダプティブ デザインよりもはるかに複雑であると考える必要があります)

アダプティブ デザイン (アダプティブ デザイン実装原則): タイプごとに異なるデザイン要素を確立することです。 Web ページは、デバイスの解像度サイズを検出した後、対応する Web ページを呼び出します。アプリが蔓延している現在の時代では、国内のアダプティブ レイアウト アプリケーションは主に、ビューポートがすでに非常に安定している Web 側に集中しています (Web 側のビューポート ビッグ データ [2016]) が、ノートブックとデスクトップのエクスペリエンスを最適化します。

レスポンシブ デザイン (レスポンシブ デザイン) は、PC、タブレット、携帯電話の異なるビューポートで同時に実行される一連のインターフェイスです。デバイスの解像度を検出することで、ページにさまざまなレイアウトやコンテンツを作成できます。

共通点

どちらも、インターネット上でますます差別化が進むビューポートの閲覧エクスペリエンスを最適化して適応するテクノロジーであり、ビューポートにより良いエクスペリエンスを提供するために登場しました。ページをさまざまな解像度のビューポートに適応させるテクニックを使用してデザインします。

レスポンシブの長所、短所、およびフラグ

フラグ

• ブレッドクラム メニュー

• ブラウザの幅を変更すると、異なる解像度で異なるレイアウトが表示されます

利点:

• Face さまざまな解像度に対応する強力な柔軟性デバイス

• マルチデバイスのディスプレイ適応の問題をすぐに解決できる

欠点:

• #シンプルなレイアウト、情報、フレームワークを備えた部門型 Web サイトにのみ適しています

#さまざまなデバイスに対応作業量が多く、効率が低い
コードが煩雑で、隠れた無駄な要素が表示され、読み込み時間が長くなります。
実際には、これは妥協的な設計ソリューションであり、多くの要因の影響を受けます。最良の結果が得られない
Web サイトの元のレイアウト構造がある程度変更されるため、ユーザーが混乱する可能性があります
アダプティブ Web サイト利点、欠点、およびロゴ

ロゴ

ほとんどの場合、単一端末の主流 N 主流ビューポート (2 ～ 3) に適応するだけです
ビューポート サイズが設定された最小ビューポートより小さい場合、インターフェイスは不完全でオーバーフローし、水平方向のスライド インジケーターが表示されます (主に PC 側で、モバイルでは決して許可されません)横）この場合）
全体的な枠組みは変わらず、水平レイアウトのセクションのほとんどが削減されます

利点

複雑な Web サイトとの互換性の向上
実装コストの削減、
コードがより効率的になります
テストが簡単になり、操作が比較的正確になります (画像がより制御しやすくなります)

欠点:

• #モバイル デザインの人気に伴い、同じ Web サイトでもデバイスごとに異なるデザインを開発する必要があることがよくあります。

• #要件が変更されると、複数のコード セットが変更される可能性があります。手続きが面倒です。

デザインと開発に役立ちます

理論的には、どのような場合でも、レスポンシブ レイアウトの方がアダプティブ レイアウトよりも優れていますが、アダプティブ レイアウトが適している状況もあります。より実用的です。 アダプティブ レイアウトを使用すると、いくつかの状態を考慮するだけですべてがうまくいくため、設計をより制御しやすくなります。
しかし、レスポンシブ レイアウトでは、多くの状態に直面する必要がある場合があります。はい、ほとんどの状態の違いは小さいですが、実際には異なるため、自分がどのような状態であるかを正確に把握するのは困難です。デザインはどのようなものになるでしょうか。 。
同時に、これはテスト上の問題も引き起こします。何が起こるかを完全に予測することは困難です。
言い換えれば、これもレスポンシブ レイアウトの魅力です。それに比べて、アダプティブ レイアウトには独自の利点があり、実装が安価でテストが容易であるため、多くの場合、より実用的なソリューションになります。

実際には、どの設計コンセプトを使用する場合でも、それぞれに独自の長所と短所があります。具体的な選択は、チーム/プロジェクトの実際のニーズに基づいて行う必要があります。

以上がアダプティブとレスポンシブの違いは何ですか?アダプティブとレスポンシブの違いの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。