質問: モバイルメニューに切り替えるブレークポイントの幅は? それは明白で明確な答えを持っているように聞こえますが、私はそれについて多くの言及を見つけることができませんでした:ウェブサイトを構築するとき、どのブレークポイント/幅が水平タブスタイルのナビゲーションメニューから垂直トグルに切り替えるのに最も理想的ですか「ハンバーガー」アイコンの後ろに隠されたモバイルメニュー?私は主に1200pxのコンテナー幅でwebサイトをデザインしているように見え、それ以下のデスクトップ/ラップトップコンピューターの画面サイズは多くないので、モバイルメニューをその1200px幅以下で起動しています。ワークフローを多少簡略化します。しかし、それは良い習慣ですか?より低いブレークポイントを好むデバイスユーザーのオーディエンスはいますか?たぶん横向きのipadユーザーは「通常の」メニューを好むでしょうか?デスクトップを含め、すべての幅で折りたたみ可能なモバイルスタイルのメニューがあるウェブサイトを見たので、ケースバイケースで目的のuxになると思いますが、予期しない考慮事項を知っておくと役立ちます。
回答: モバイルブレークポイントを忘れて、マーケティングの外部にphoneとtablet sizeはありません。ブレークポイントは、画面サイズではなく、コンテンツに続く必要があります。簡単な例として、メニューを考えてみましょう: home | products | contacts mobileメニューを提供する必要があると思いますか?ハンバーガーメニューに3つの要素を入れたいですか?おそらく>=320pxの画面にぴったり収まります。一方、次のメニューがあります。 home | tvs | tablets | notebooks | printers | air conditioners | routers | help より早く調整する必要があります。しかし、同時に、ハンバーガーを<1000pxに表示して、1行に収まらないようにしますか? priority + pattern のような他のナビゲーションオプションを探ります。補足として、これはすべてのサイトパーツに適用されます。 モバイルレイアウトに切り替えるだけではありません。コンテンツが<700pxの状態に完全に適合している場合でも、400pxに到達したからです。 google web fundamentalsには、これに関するページがあります。 特定のデバイス、製品、またはブランドではなく、コンテンツに基づいてブレークポイントを作成します。 from: ブレークポイントの選択方法