質問: 新しいフロントエンド開発者と連携するのに最適なワイヤフレーミングブレークポイント 私はこのトピックでトンを検索しました、例えば: 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ではなく大量のワイヤフレームを設計することを意味します合わない。ラピッドプロトタイピング/ワイヤフレームでこれを行う時間はありません。 あなたのアプローチは何ですか?
回答: 私は通常、それが使いやすく非常にうまく機能しているように見えるので、ブートストラップの標準ブレークポイントを使用します。以下が最新バージョンのブレークポイントです。//非常に小さいデバイス(ポートレート電話、576px未満)//これはブートストラップのデフォルトであるため、メディアクエリはありません//小型デバイス(横長の携帯電話、576px以上)@media(min-width:576px){...}//中型デバイス(タブレット、768px以上)@media(min-width:768px){...}//大きなデバイス(デスクトップ、992px以上)@media(min-width:992px){...}//超大型デバイス(大型デスクトップ、1200px以上)@media(min-width:1200px){...}