web-dev-qa-db-ja.com

レスポンシブブレークポイント?

Twitter Bootstrapは、レスポンシブデザインに次のブレークポイントを使用します。

大型ディスプレイ:1200px
デフォルト:980px
タブレット:768ピクセル
モバイル:480ピクセル

クライアントは、大型ディスプレイのブレークポイントに1280pxを使用していると述べました。

これらの業界標準はありますか、それとも私たちが今行っているように単に構成されていますか?

29
Xtian

現在の傾向は、コンテンツを考慮してブレークポイントを設計することです。幅によっては、コンテンツが歪んでいる(または引き伸ばされている)ように見えるため、ブレークポイントを使用して、一般的なデバイスの幅に対応していない場合でも、再配置する必要があります。コンテンツは、どのデバイス幅でも適切にレイアウトされているように見えるはずです(理由は、幅3000ピクセルを埋める必要はないためです)。 611pxのブレークポイントが最適なデザインもあれば、795pxのブレークポイントが最適なデザインもあります。

新しいデバイスのすべての画面サイズ についていくのは簡単ではありません。適切な幅で機能させると、よりよく眠れます。

とはいえ、できるだけ多くのデバイスをテストして、理論的にどの幅でも見栄えが良いものが実際に見栄えがよく、実際の使用例の実際のデバイスで適切に機能することを確認します。

13
obelia

私が知る限り、業界標準はありません。経験から、彼らはあなたが話している人によってわずかに異なるようです。 Smashing Magazineは最近良い記事を書きました レスポンシブデザインの論理的なブレークポイントについて

システムの潜在的なユーザーが使用する解像度を理解します。これは、ブレークポイントを通知するのに役立ちます。

私の見解:

すべてのシナリオをカバーできる可能性は低いので、ユーザーの各セグメントに使用可能なソリューションを提供するシナリオを設計してください。

将来を考慮することを忘れないでください。サイトが将来存在する場合は、デバイスの解像度がどのように変化するかを検討し、設計時にそれらを考慮に入れるか、適応可能なシステムを提供します。

Foundation 4のようなレスポンシブグリッドシステム(Courtneyが言及)をブレークポイントと共に使用することは良い解決策ですが、実際には特定の要件に依存します。レスポンシブフレームワークに関しては、個人的にはFoundationとBootstrapを使用しました。どちらも便利だと思いましたが、実際にこれがプロジェクトの正しいアプローチであるかどうかは、実際に達成しようとしていることに依存しています。

12
Sheff

デザインに応じて適切なブレークポイントを選択することについて他の人が言ったことをさらに詳しく説明するには、 Goldilocksアプローチ をご覧ください。このアプローチは、列幅のピクセルを考慮せず、代わりにemを考慮して、テキストの各行を長くしすぎないようにして「最適な」読み取りエクスペリエンスを提供します。これには、「標準」デバイスではなく、ユーザーが読むコンテンツを最適化するという利点があります(iPadの将来の解像度が異なる場合は、想像してみてください。現在、Apple以外のタブレットには10​​24pxまたは768pxがありません。 -ワイドビューポート-HTC 8XスマートフォンとMicrosoft Surfaceタブレットを使用していますが、WebサイトがiPhoneとiPadのみをターゲットに「最適化」すると、私はそれを嫌います)

独自のブレークポイントを定義する場合、これには2つの方法があります。モバイルファースト(最小のブレークポイントを最初)または最大ファーストのいずれかから開始できます。モバイルファーストには、ユーザーに表示する必要があるWebページの最も重要な部分を計画および決定できるという利点もあります。ただし、これを逆に行うと、ウィンドウや画面が狭くなるにつれてデザインが押しつぶされすぎることに気付いたときにブレークポイントを追加できます。そうすることのリスクは、モバイル用にページを最適化するのを忘れることです(つまり、デスクトップ向けの1000pxを超える幅の画像を提供し、CSSを使用して小さな画面のサイズを変更します)。

4
jingtao

アナリティクスをチェックして、ユーザーが実際に使用しているものと、トレンドをどこで設計するかを確認します。デバイスではなく、解像度と画面幅を確認する

コンテンツを中心に設計するというアイデアは素晴らしいものですが、正直に言って、そのレベルの詳細を前もって取得できるのは誰ですか?ほとんどの場合、クライアントはまだコンテンツ戦略を策定しておらず、ウェブサイトで開発しています...

3
The Big E

サイト/ウェブアプリのブレークポイントは、実際にはプロジェクトコンテンツのニーズに基づいている必要があります。多くの開発者やデザイナーは、サイト/アプリの開発を開始するときに、よく知られているデバイス(iphone/ipad/etc ...)のブレークポイントを知っています。ただし、レイアウトの全体的なルックアンドフィールを微調整したり、特定のコンポーネントを修正したりする必要があるときはいつでも、ブレークポイントを追加していきます。

1
JeffH

Foundation 4の breakpoints は業界標準として使用できます。顧客ベースが増加しているので(いくつか挙げると、ピクサーと全国的な地理的条件)、私は彼らの慣習に従うことをお勧めします。

1
Courtney Jordan

設計原則が急速に進化しているため、業界標準はありません。

フレームワークは、レスポンシブな「テンプレート」を使用してプロジェクトを実現するのに最適ですが、レスポンシブデザインのコアコンセプトは、現在と将来の両方の任意の解像度で任意の画面に適合することです。ほとんどの場合、ブレークポイントの設計は任意の幅であるブレークポイントの設計であるため、その概念に違反します。

応答して考えることも、フレームワークとそのブレークポイントから始めるべきではありません。コンテンツとデザインから始め、メディアクエリを適切に使用する必要があります。

1
Nic