レスポンシブデザイン-最も一般的な解決手順
デスクトップ、タブレット、モバイルで利用できるようにする必要があるWebアプリを開発しています。
レスポンシブデザイン、メディアクエリなどについてはすでに知っていますが、ここでの質問は解決策についてです。
だから、これはおそらくすでに何度か尋ねられていますが、それについてのいくつかの最新の詳細が欲しいです。
レスポンシブアプリを設計する必要がある場合、メディアクエリにどのような手順を使用すればよいと思いますか？
私はヨーロッパの画面解像度に関するかなり多くの詳細を提供するこのウェブサイトを見つけました（私はヨーロッパにのみ興味があります）：
しかし、ここに表示される解像度はかなりたくさんあります。
タブレットのデフォルトの768pxを使用しても、まだ正しいと思いますか？
また、サポートされている最小の解像度は何だと思いますか？ 320px以上ですか？
フィードバックをありがとう
画面の幅について考えるのではなく、コンテンツについて考えます。新しいデバイスは常にリリースされるため、特定のデバイスをターゲットにするのではなく、コンテンツに基づいた戦略が最適です。
最初にこのモバイルに近づいていると仮定して、コンテンツがブレークポイントを維持する必要があると指示するまで、最小幅から始めてビューポートを広げます テキストの読み取り可能な行の長さ 、最高のナビゲーション体験を快適に提供します空白など。必要に応じて、ブレークポイントを拡張および追加してください。
このアプローチは、画面全体ではなく特定のコンポーネントをターゲットにする element query を使用するとさらに効果的に機能します。
参考文献：
まず、各ユーザーが各デバイスで行っているタスクを理解します
それは本当にそれに大きく依存しています。彼らがあなたのウェブサイトを使う方法はあなたのデザインを決定するべきです。想定をディスプレイにのみ基づいて、それを主な基準にすると、間違ったコンテンツを提供する可能性があります。次に例を示します。
- ユーザーが全幅の画面でアプリをブラウジングしている：予想は1366×768になる可能性があります
- タスク[〜＃〜] x [〜＃〜]を実行しようとしていますが、これには別のウィンドウからデータをチェックアウトする必要があります
- そこで彼は新しいウィンドウを開き、2つを並べて設定します。今、あなたの解像度は統計があなたに与えることができるものとは何の関係もありません
- その後、彼はタブレットを手に入れ、タスクを実行します[〜＃〜] y [〜＃〜]。画面サイズは、タスクの設定[〜＃〜] x [〜＃〜]とほぼ同じですが、必要な内容が異なります。
これこそが、レスポンシブデザインに関するものです。画面サイズや解像度よりも、「デバイスとタスク」に基づいて想定する方がよい場合があります。ただし、いくつかの一般的なブレークポイントはまだ存在しています。
一般的なブレークポイント
Opera/Chromeブラウザーはいくつかのブレークポイントを解決しました。Ctrl-Alt-I、Ctrl + Alt + Mでそれらを確認できます。画面サイズと一般的なデバイスタイプを関連付けています。こんなふうになります：
- モバイルS：320px
- モバイルM：375px
- モバイルL：425px
- タブレット：768px
- ノートパソコン：1024px
- ノートパソコンL：1440px
- 4K：2560px
また、よく知られたCSSフレームワークによって設定されたブレークポイントを確認することもできます。
お役に立てば幸いです。
マテリアルデザインから取得 cssファイル 解像度は次のとおりです。
- 幅480px
- 幅760px
- 幅1024px
現在使用されているすべての解像度の約21％を構成しているため、幅が360px以下の解像度をサポートする必要があると思います（- statcounterによると =）。 320pxの解像度は、すべての解像度の約7〜8％を占めます。
タブレットの解像度の場合、1024px幅のブレークポイントが最適です。タブレットの大部分 resolutions が1024x600で始まるためです。ただし、インターフェイスによっては、少なくとも95％の解像度をサポートする必要があります。これは、320px幅のサポートを意味します。
私はマットの返答を2番目にします。マテリアルデザインの仕様のようなガイドラインを参照することは問題ありませんが、ハードルールとして採用しないでください。最終的にコンテンツに合わせてブレークポイントを調整すると、サイトはどのデバイスでも見栄えがよくなります。