私はちょうどレスポンシブなCSSに没頭しています。私はどのようにさまざまなデバイスの幅を割り出すのだろうと思っています。可能な限りすべてのモバイルデバイスをテストして一日中過ごしたいとは思っていません。
私はいくつかのサイトが @media only screen and (max-device-width: xx) 実際のブラウザのウィンドウサイズではなく、非常に特定の解像度に制限されているようです。
どんなアドバイスも素晴らしいでしょう。私はWeb開発やCSSには新しいものではなく、レスポンシブなデザインに全く新しいものです。
回答：
回答№1は16それはあなたが「いつ、どこで、あなたの ブレークポイント.
数多くのデバイスで解像度をテストするのではなく、 すべて 解決？ レスポンシブウェブサイトはレイアウト、コンテンツなどによって異なるため、さまざまな解像度のさまざまなデバイスが存在するため、すべてのデバイスに対してレスポンシブウェブサイトを修正する魔法のブレークポイントはありません。
あなたは考えているかもしれません、 "地獄、私はピクセルごとに行くつもりはないし、私のウェブサイトをチェックする、"それは実際に私が意味するものではありません。
- ブラウザにジャンプし、あなたのウェブサイトに移動し、コンソールを開く
- ビューポートの解像度を非常に低い解像度に変更します。 320pxは良い出発点です。
（注意： コンソールのビューポートタイプwindow.innerWidthのサイズを取得します。見る リソース デザインのデバッグを強化するさまざまな方法があります） - レイアウトを分析します。この決議案はどのように見えますか？この解像度でレイアウトを変更する必要がある場合は、ブレークポイントを追加する時間です！
- 何かが壊れたり恐ろしく見えるようになるまで、ブラウザウィンドウをゆっくり引き伸ばしてください。この時点で別のブレークポイントを挿入する必要があります。
- あなたの心の内容にステップ4を繰り返します
心に留めておいてください：
レスポンシブルデザインのポイントは、すべてのデバイスでサイトを見栄え良くすること、コンテンツを見栄え良くすることではありません どこでも - サム・リチャーズ
リソース：
- レスポンシブなWebデザイン - Anthonyによるプログラミング
- レスポンシブなタイポグラフィー
- レスポンシブデザインのための論理的なブレークポイント
- 上のビデオで述べたように、 Modernizr デバイス固有の機能を検出するのに役立つすばらしいJSライブラリです
- Firefox 15+のレスポンシブなデザインビュー機能
- レスポンシブなデザインチュートリアルChrome向けの表示