流体設計とレスポンシブ設計の正確な違いは何ですか？
流体設計とレスポンシブ設計の正確な違いは何ですか？
流動的でレスポンシブなデザインについて少し混乱しています。 Fluidは、幅をパーセンテージで指定するため、ブラウザーを縮小または拡大した場合でもブラウザー上でデザインが美しく見えます。しかし、レスポンシブの違いは何ですか？
主な違いは、Fluid Layouts（Liquid Layoutsとも呼ばれます）はWebサイトの比例配置に基づいているため、レスポンシブデザインでは CSS Media Queries 画面サイズ/画面の種類に基づいて異なるレイアウトを提示します。両方の種類のデザインの例については、 インスピレーション：流体およびレスポンシブデザイン を参照してください。
Fluidの目的は、すべての要素に対して同じ空間加重を維持することであり、同じ種類のさまざまなサイズの画面で問題なく機能します。 32インチの高解像度モニターと12インチの低解像度ノートパソコンで問題なく見える傾向があります。実装は非常に簡単です。
レスポンシブデザインの目的は、特に画面の種類に合わせて調整されたさまざまなデバイスレイアウトを提供することです。たとえば、サイトのレイアウトは通常、スマートフォンの1列に切り詰められます。
詳細については、Smashing Magazineの Fixed vs. Fluid vs. Elastic Layout：What’s The Right One For You？ をチェックしてください。これは、Fluidデザインの主な変更点について詳しく説明しています。また、レスポンシブデザインの詳細を知りたい場合は、 レスポンシブWebデザインのガイドラインとチュートリアル でレスポンシブの概要を確認できます。
レスポンシブデザインは現在モバイルのおかげで非常に「イン」になっています。Smashingには実際には完全な レスポンシブデザインのタグ があります。
流動的なデザインとは、サイトのさまざまなセクションが相対的に定義されることを意味します（たとえば、要素はページ幅の50％です）。使用しているブラウザーがスマートフォン、タブレット、デスクトップのいずれであっても、サイトの外観は（ほとんど）同じであり、比率も同じです（この要素は画面の半分を占めます）。これは、CSSでは、すべてがパーセント、ems、またはデバイスからデバイスに適切にスケーリングされるその他のメトリックで定義されるためです（ピクセルで固定サイズを定義すると、要素がデスクトップの画面の半分を占める可能性がありますが、タブレットでは画面全体、スマートフォンでは画面より大きくなります）。
レスポンシブデザインは通常、プログラミング側にあり、ユーザーのブラウザ（useragentを介して）または画面のサイズを検出し、実際にデバイスのサイズに基づいて異なるビューを表示します。たとえば、デスクトップでは3列のレイアウト、タブレットでは2列のレイアウト、スマートフォンでは1列のレイアウトを使用できます。この場合、実際にデバイスに基づいてビューを変更しているため、各デバイスのビューは非常に異なって見えます。
Twitter Bootstrapはこれらの両方を実行でき、サイトにはいくつかの素晴らしい例があります：
流動的なデザインは、ユーザーのデバイスの画面幅に基づいてコンテンツを拡大または拡大できるパーセンテージを使用するデザインであるという点で正しいです。 Responsiveは、CSS3 @mediaクエリを使用して、流動的（または固定）な設計をさらに一歩進めます。 @mediaクエリは、開発者がUI/UXを改善するために特定のコンテンツを変更できる特定の間隔（またはデバイス）を対象としています。
簡単な例は、幅が90％である入力を備えた流体設計のフォームであり、画面サイズに応じて伸縮します。これはモバイルデバイスでは見栄えがするかもしれませんが、タブレットやデスクトップが大きいと不快に見えるため、[@ media screen only and（min-width：600px）]をターゲットにして幅をより小さなパーセンテージにリセットし、応答性を高めることができます。
さらに一歩進んで、Webサイトのナビゲーションメニューは流動的で、デスクトップの上部に広がっている場合がありますが、開発者はiPhone [@media screen only and（min-device-width：320px）and（max-device-width ：480px）{#nav {different style ...}}]メニューを個別のボタンとして表示します。
混乱はおそらく、コンテキストに基づいた要素の応答性の高い調整も意味するように、流体設計という用語の使用に起因します。例えばテキストボックスは、ユーザーがさらに入力すると拡大します。したがって、流体はパーセンテージベースのcssプロパティを意味する必要はありません。レスポンシブデザインは、優れたuxデザインの結果であるはるかに広い用語です。コンテキストやバックエンドデータに基づいて適切な種類のことが行われ、ユーザーに適切な（キュー）フィードバックが提供されます。
ブラウザーウィンドウのサイズが変更されると、Fluidはコンテンツを拡大および縮小しますが、これは、サイズ変更時にWebサイトのレイアウトやスタイルが変更されて、Webサイトが全幅または最小幅でひどく見える可能性があるということではありません。
レスポンシブも同様ですが、コンテンツがさまざまなサイズで使用できるように注意が払われています。たとえば、ブラウザーが指定された幅よりも大きいまたは小さい場合、条件付きスタイルシートが有効になることがあります。これにより、デザイナーや開発者は、さまざまなデバイスでさまざまなサイズでコンテンツを表示する方法を制御できます。
Fluid =ウィンドウなどを拡大/縮小するとUIが伸縮します。全体のポイントは、レンダリングでベクターグラフィックスと同じように機能することです...実際、Fluidデザインで成功する可能性が高くなります。スケール9ストレッチ式を持つベクトルまたはビットマップに依存しています。
Responsive =画面のメトリックに応じて、ストレッチ/追加/削除されるものの混合。それを超えてそれは単なる純粋な意味論です:)
レスポンシブの実際の例についてはOfficeリボンをご覧ください...画面のサイズに応じてさまざまな状態が管理されます。
応答性はおそらくOfficeを製品ラインと見なします...コードベース/アプリ自体はすべて実際のコードの点で言うとすべて異なりますが、哲学は堅実です-「エクスペリエンスは、複数のプラットフォーム/デバイスにまたがっても同じままです」
Imhoの人々は夢のあらゆる場所でコードを使用したいと考えています。何年も何年にもわたってこれらのソリューションがクラッシュして燃焼するのを見た後、それを見つけるのは珍しいことです。
3D/2Dの成功に成功した唯一の最も近いレンダリングパイプラインは、Unity3Dです... HTML5でも、走行距離は、幅と深さのエンゲージメント間で経験が異なります...
前の言葉を言い換えるだけです。回答...
fluid design = Webページはクライアントウィンドウのサイズをピクセル単位で確認し、継続的に要素を合わせて画面上で見栄えをよくします（たとえば、3つのdivがある場合、等間隔に配置しようとします） ）
レスポンシブ = Webページは画面サイズを表示します（モバイル画面ですか、タブレットかPCサイズのブラウザウィンドウですか？）さまざまなサイズの値でトリガーポイントを使用して異なる各トリガーポイントでのコンテンツとレイアウト。