レスポンシブデザインのウェブサイトはどのくらいの幅にする必要がありますか？
多分これは愚かな質問ですが、変更されたのではないかと思います。
Webサイトの幅は960pxでしたので、すべての画面解像度ですべてのコンテンツを簡単に見ることができました。
しかし、新しい「レスポンシブデザイン」とhtml5では、レスポンシブデザインを携帯電話やタブレットでの表示に使用しているため、これは実際には必須ではありません。
だから私の質問：
デスクトップのレスポンシブデザインの最適な幅はいくつですか？
最終的に、Webサイトの最適な幅とブレークポイントは、表示するコンテンツによって異なります。
とはいえ、レスポンシブデザインの優れた点は、小さな画面だけでなく、大きなディスプレイにも対応できることです。 960ブレークポイントを使用できますが、1200、1400などを使用することもできます。
レスポンシブデザインのポイントは、ページの幅からデザインを開始しないことです。
レスポンシブデザインの考え方は、コンポーネントからデザインを開始することです。表示するコンテンツを検討し、スケーリングシステムを設計します。画面の幅に合わせて伸縮するもの。
レスポンシブサイトには固有の幅はありません。非常にシンプルなレスポンシブデザインにはブレークポイントがある場合があります。これらは基本的に、モバイル、タブレット、デスクトップのサイトを1つにまとめたものです。しかし、それは最も単純なレベルにすぎません。より野心的なレスポンシブデザインは、ウィンドウサイズ、テキストサイズをスムーズにスケーリングすることで定義されますが、ブレークポイントを使用して、特定の余分な要素がいつ消えるかインラインに移動するかを決定します。
それはページの代わりにシステムをデザインすることです。
許可された画面解像度などは、この質問が出されてからおそらく進んでいますが、私が現在理解しているのは次のとおりです。
ほとんどのデスクトップ画面はフルHD（1920px x 1080px）で、4kが一般的（3840px×2160px）になり、ラップトップは通常768 x 1366pxになります（一部はHD画面があり、Macbook Proがあります）。その上、さまざまな画面解像度を持つモバイルデバイスが幅広くあります（一部は非常に高い解像度で、より低い解像度で表示されます）。
その情報に基づいて、複数の列に満足している場合は、約1900pxの「ワイド」デザインを使用すると思います（ほとんどのユーザーがデスクトップを使用している場合）。一方、標準の2列または3列のレイアウトを表示している場合は、最大幅を設定することを検討します（約1680pxが一般的ですが、これはコンテンツによって異なります）。明らかに、小さな画面ではうまく変形する必要があります。
いつものように、ユーザーの画面解像度を取得できる場合は、より一般的な解像度で見栄えがよくなり、残りの部分はうまく変形するようにサイトを設計するのが最善です。
私の知識によれば、レスポンシブデザインのウェブサイトは通常、特定の幅や幅を必要としません。ウェブサイトは、タブレット/携帯電話やデスクトップでも自動的に適切に調整されるためです。
タブレットの閲覧者（横向き）は、設計どおりサイト全体を表示できるため、960pxは適切なベース幅です。
あなたはただ計画する必要があります。はい、レスポンシブなウェブサイトはパーセンテージに基づいていますが、サイドバーをページ幅の25％などに設定すると、携帯電話や小型のタブレットでは非常に狭くなります。
サイドバーの固定ピクセル幅を設定し、600px程度の画面サイズでフロートをクリアするのが最適です。
それをテストし、テストし、テストします。すべてのページを見てください。退屈な作業ですが、モバイルサイズの画面でうまく機能するとは思えないことに驚かれるでしょう。
WHOA WHOA WHOA？！？ 1100pxは答えではありません!!!
レスポンシブとは、最大画面までの画面に応答することを意味します。 1100pxは商用の最大値ではありません。人々があなたに与えるために時間をかけたいくつかの情報をもう一度読みたいと思うかもしれません。レスポンシブなウェブサイトは、あらゆるデバイスのあらゆる幅に対応するように設計されます。これが、「流体」を専門用語にせざるを得ない言葉を人々がすべて屠殺したのが不満である理由です。
ここでのポイントは、フル幅のサイトを実行していない場合、コンテンツコンテナの幅はどうあるべきかということです。私の目では、1100pxはボックス化されたデザインの適切な幅であり、それをすべての小さい解像度に調整するために反応させることができます。
現在最も人気のある画面解像度は1440幅のラップトップ画面であり、W3 SchoolsのWebサイトから、99％の人が現在1024x768の画面解像度を持っています。したがって、1024、960、800、480の周りでレスポンシブクエリを実行する場合は、ほとんどすべての境界をカバーする必要があります。ロゴやテキストなどでギャップを埋める必要がある場合は、その間に2つのブレークポイントを追加します。
元の質問に対するMarjan Venemaのコメントが最も正確です。ページを広くすると、テキストやコンテンツが（Wikipediaのように）広くなりすぎる場合、その幅でキャップする必要があります。背景、ヘッダー、フッターなど、ページの他の部分を全幅にすることはできますが、テキストが伸びて読みにくくなるサイトは非常に煩わしくなります。そのため、私は常にWikipediaウィンドウのサイズを変更する必要があります。