新しいフロントエンド開発者と連携するのに最適なワイヤフレーミングブレークポイント
私はこのトピックでトンを検索しました、例えば：
- https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
- https://graphicdesign.stackexchange.com/questions/39433/what-are-best-practices-for-determining-sensitive-design-breakpoints
- https://graphicdesign.stackexchange.com/questions/247/is-there-a-standard-width-for-designing-web-page-mockups/277#277
- レスポンシブなWebサイトにワイヤフレームする正しいブレークポイントを決定してください！
- レスポンシブデザイン：1024pxより大きくする必要がありますか？
- レスポンシブブレークポイント？
- https://seesparkbox.com/foundry/there_is_no_breakpoint
質問は残ります]新しいチームを構築しているときに、いくつかの標準を組み込んで、できるだけ少ないブレークポイントで高速かつ効率的に作業したい場合、開発者は設計へのアプローチを知りません（ "私のUXチームはレスポンシブデザインを理解しているため、ワイヤフレームを作成しなくてもフローの変化を正確に示すことなく2つのレイアウトを「補間」できます "）、方法レイアウトの変更？
"CSSブレークポイントを実行する100％正しい方法"（最初のリンク）を実行すると、4つのブレークポイントが得られます。私の知る限り、以下を設計する必要があります。
- 600pxブレークポイントにより、開発者は電話デバイスのアドレス指定方法を把握できます
- 900pxブレークポイントにより、開発者はタブレットのポートレートを600pxから900pxに対処する方法を認識
- 1200pxブレークポイントにより、開発者はタブレットランドスケープを900pxから1200pxに対処する方法を認識
- そして今何？ 1800px？開発者はどうやって方法を知っていますか？一部のテーブルが収まらない場合に1280で圧縮し、小さな解像度で1つの列を削除する必要がありますか？または、ホバー効果で動作する要素に変更があったことをどのようにして知るのでしょうか（タブレットはホバーを受け入れないため）。
1800pxのブレークポイントは、すべてのラップトップおよびデスクトップデバイスでWebサイト/アプリがどのように見えるかを指示する必要がありますか？もしそうなら、私たちの経験から、そのすべての情報を1つの大きなブレークポイントに含めることはほとんど不可能です。そして、ご存じのとおり、誤解を解消したい場合は、メモをとるよりも何かを示す方が簡単です。
「モバイルを最初に拡大して」と言う人もいますが、実際には、クライアントの前に380pxのレイアウトを表示する人はいません。 「すべてが％で実行されるので拡大する」と言う人もいますが、すべての空白の比率を計算して完全に拡大することもほとんど不可能です。
"ブレークポイントはありません"の方法は、要素が削除されるたびに新しいものを設計する必要があるため、4または6ではなく大量のワイヤフレームを設計することを意味します合わない。ラピッドプロトタイピング/ワイヤフレームでこれを行う時間はありません。
あなたのアプローチは何ですか？
これは確かに複雑なトピックであり、私は多くの異なるアプローチを使用しています。私はモバイルファースト戦略を決して信じていませんでした。いいように聞こえるかもしれませんが、あなたが言及する理由のために実際には非現実的です。 UIデザイナーにHDデスクトップ、SDデスクトップ（ラップトップ）、タブレット、モバイルデザインを構築させるのが最も効果的だと思います。それらすべてが実際に必要かどうかは、それを実装する開発者の設計予測能力に依存します。 正確なブレークポイント値は、それらがその特定のデバイスに期待できる範囲内にある限り、考えられるほど重要ではありません。絶対ピクセル値で考える代わりに、より理にかなっています。画面の縦横比を考慮する必要があります。これは、デバイスの種類ごとに（比較的）一貫性が維持されるためです。
CSSでの実装に関しては、Webサイトのすべてのサイズ変更状況で機能するブレークポイントを見つけることはほとんど不可能です。そのため、私はデバイスの設計をガイダンスとしてを使用して、どの要素が壊れると予想され、どのようにサイズを変更する必要があるかについて説明します。
私は、さまざまなメディアクエリとサイトのさまざまな要素に流動的/相対的なwidth定義を使用して、ブラウザーでサイズを変更しているときに奇妙なことが起こらないようにしています。ただし、変数に近い範囲にあるブレークポイントをグループ化して、より一貫したエクスペリエンスを作成することは理にかなっています。硬いブレークポイントではなく、可能な限りシームレスな方法で寸法を表示するように適応する流動的な設計で考えることが重要です。つまり、CSSでメディアクエリを必要なだけ使用して、それを実現します。 SASS/LESSのようなCSSプリプロセッサは、そのために非常に役立ちます。
上記のブレークポイントは現実的なようです。私も調査を行い、ブレークポイントをどうするかを決定します。
Webサイトに大量のトラフィックが発生した後、画面の解像度サイズ（分析）を確認し、通常は最終的な方法を把握します（その時点でブレークポイントを少し変更することもあります）。
私は通常、それが使いやすく非常にうまく機能しているように見えるので、ブートストラップの標準ブレークポイントを使用します。
以下が最新バージョンのブレークポイントです。
//非常に小さいデバイス（ポートレート電話、576px未満）//これはブートストラップのデフォルトであるため、メディアクエリはありません
//小型デバイス（横長の携帯電話、576px以上）@media（min-width：576px）{...}
//中型デバイス（タブレット、768px以上）@media（min-width：768px）{...}
//大きなデバイス（デスクトップ、992px以上）@media（min-width：992px）{...}
//超大型デバイス（大型デスクトップ、1200px以上）@media（min-width：1200px）{...}