レスポンシブ

1. インターフェースを開発するだけです。
2. ページの画面適応は特定の範囲内です。たとえば、PC 用に 1 セット (>1024)、タブレット用に 1 セット (768 ～ 1024)、レスポンシブなすべてのページに 1 セット。適応されています。 (ご想像のとおり、レスポンシブ デザインはアダプティブ デザインよりもはるかに複雑であると考える必要があります)
3. Web ページを作成し、CSS メディア クエリ、コンテンツ ベースのブレークポイント、およびその他のテクノロジを使用して、Web ページのサイズを変更して、さまざまな解像度の画面に適応させます。

アダプティブ

1. 複数のインターフェースを開発する必要がある
2. ビューポートの解像度を検出することで、現在アクセスされているデバイスが PC、タブレット、携帯電話のいずれであるかが判断され、それによってサービス層が要求され、異なるページが返されます。レスポンシブ デザインはビューポートの解像度を検出し、さまざまなクライアントに対して操作を実行します。さまざまなレイアウトやコンテンツを表示するためのコード処理。
3. デバイスの種類ごとに異なる Web ページを作成し、デバイスの解像度を検出した後、対応する Web ページを呼び出します。

レスポンシブとアダプティブを区別する

1. ブラウザのchromeまたはedgeを使用して、コンピュータ上のURLを開きます。
2. によると F12 または右クリックして選択します 検出。
3. パネルの左上隅をクリックしますデバイス切り替えアイコン、以下に示すように

4. 切り替え後は、
   パソコンとモバイル端末で表示されるレイアウトが自動的に切り替わります。レスポンシブ、このサイトなど。
   レイアウトが自動的に適応しない場合は、ページを更新した後にレイアウトが適応に切り替わります (URL がジャンプするかジャンプしません)。アダプティブ、百度など。
   更新後に切り替えがない場合は、応答性も適応性もなく、さまざまなデバイスに適応しません。

提案

• 開発の観点: 単一ページ、複雑な機能、適応型の機能、レスポンシブ。
• SEO の観点: 検索エンジンは一般に応答性を好みます。

要約する

• レスポンシブ:テンプレートのセット; フロントエンドによって調整され、異なる解像度のテンプレートが 1 つのページに統合され、1 ページのテンプレートをダウンロードするだけで済みます。
• 適応性:複数のテンプレートセット; バックエンドによって調整され、各解像度テンプレートには 1 ページがあり、異なる解像度テンプレートが個別にダウンロードされます。