レスポンシブウェブデザインとは実際にはどういう意味ですか。
ResponsiveとFluid Webデザインの正確な違いを理解するために、多くの記事を読みました。しかし、私の理解にこれら2つを区別させることができませんでした。
誰かが私の次の質問でそれを理解するのを手伝ってくれますか？
- レスポンシブとは、スマートフォン（向きを含む320 * 480）、タブレット（向きを含む768 * 1024）、およびデスクトップ（幅980/960）の3つのビューポートのみのためにWebサイトを開発することを意味しますか？たとえば、他の中間的な解決策がある場合などです。 480から768まで、3つのメインビューポートの解像度と同じ完璧な外観をWebサイトに持たせることは必須ではありませんか？
つまり、クライアントからレスポンシブなウェブサイトの作成を求められた場合、スマートフォン、タブレット、デスクトップなどの3つのビューポートのみのウェブサイトを作成することになりますか？彼はこれら3つを除いて他の解決策を意味するのではありませんか？
- 流動的である間、ウェブサイトは320から1900までのどの解像度でも完璧に見えますか？
[オンラインでレスポンシブWebサンプルを確認し、ブラウザの幅を変更すると、コンテンツ/レイアウトはどの幅でも完璧に表示されます。次の行の他のコンテンツがシフトしているため、コンテンツの周りに余分なスペースが表示されません。それでどうなるの？]
- もう1つの質問は、レスポンシブWebデザインの実行中にのみメディアクエリを使用するのか、それとも流動的なWebデザインを作成する必要がないのかということです。
あなたが探している答えはresponsiveとadaptivewebの違いです設計。簡単に言うと、レスポンシブとは、ブラウザーウィンドウのサイズを変更でき、Webサイト/アプリがそれに合わせてサイズ変更できる場所です。アダプティブは、あなたが言ったとおりです。いくつかのビューポート用に設計されているため、おそらくiPhone、タブレット、および15インチのコンピューター画面用です。
ただし、最近の携帯電話やタブレットにはさまざまな（画面）サイズがあるため、アダプティブは最適な方法ではない可能性があります。ただし、レスポンシブサイトはアダプティブサイトのように少し動作する可能性があります。そのため、ウィンドウのサイズを変更すると、特定のカットオフポイントに「スナップ」することがわかります。
http://www.pbs.org/idealab/2013/06/responsive-vs-adaptive-mobile-strategies-of-top-news-sites
レスポンシブWebデザインは、Ethan Marcotteが作成した用語で、CSSメディアクエリ、流動グリッド、およびWebページを適応させるその他の手法を使用する手法を説明しますさまざまな画面解像度（通常、幅のブレークポイントに基づく）。通常、特定のデザインには、3、4のブレークポイント（モバイル、タブレット、デスクトップ、特大デスクトップ）がありますが、これは必須ではありません。レスポンシブデザインとは、さまざまな画面サイズに適応することを意味します（10個のブレークポイントまたは2個のブレークポイントを使用することも、コンポーネントをすべて独立した解像度で適応させることもできます）。
fluid designはレスポンシブWebデザインのコンポーネントです。通常、RWDを機能させるには、パーセンテージに基づくある種のグリッドシステムが必要です。これにより、さまざまな解像度で適切に伸縮します。流動的なグリッドを使用すると、スタッキングなどの細工を行うこともできるため、さまざまな解像度のブレークポイントでより適切に適応できます。
RWDの感触を得るために、 Bootstrap や Zurb Foundation などの一般的なフレームワークをチェックすることをお勧めします。
流体設計には限界があります。たとえば、テキストの列を320pxから1120pxに拡大して使用できるようにすることはできません。
したがって、流動的なデザインは通常、範囲（通常はデスクトップ画面）向けであり、通常、列の幅がある程度変化する列レイアウトで構成されます。
より広い範囲の画面サイズに対応するには、レスポンシブルートを使用できます。これは、Fluidレイアウトのように少しストレッチすることに加えて、さまざまな画面に対応するために要素を再配置したり、要素を追加/削除したりします。
これは必ずしも「3」のビューポートを意味するわけではありません。 3の場合もあります。5の場合もあります。必要に応じて30の場合もあります（ただし、これは明らかに非現実的です）。