web-dev-qa-db-ja.com

レスポンシブサイトでのメディアクエリの一般的なブレークポイント

そこで、メディアクエリを多用する最初のレスポンシブWebサイトに取り組んでいます。最適化すべき一般的なページ幅があるかどうか疑問に思っていました。

私はおそらく最大の幅を持っています（フルフルになりません）3-5の幅を設定し、それらの間のCSS3トランジションを楽しくします（ CSS Tricks の動作に似ています）。

現在、私が使用している数字はいくぶんarbitrary意的です：

@media all and (max-width: 599px){...}
@media all and (min-width: 600px) and (max-width:799px){...}
@media all and (min-width: 800px) and (max-width:1024px){...}
@media all and (min-width: 700px) and (max-width: 1024px){...}
@media all and (min-width: 1025px) and (max-width: 1399px){...}
@media all and (min-width: 1400px){...}

また、一部のモバイルデバイスは期待どおりに動作しないことを読んだと思います（@media）。これはどこで機能し、これらの状況にどのように対処する必要がありますか？

csscss3mobileresponsive-designmedia-queries
42
Zach Lysobey

あなたのメディアクエリのためのブレークポイントを決定する際、これらの現実を考慮してください。

  • 異なるデバイス数千の間で異なる画面サイズの何百もあります。
  • 将来は、新しい画面サイズをもたらすでしょう。
  • Apple、Samsung、Microsoft、LG、Nokia、およびその他のデバイスメーカーは、いつでも人気モデルの画面サイズを変更できます。

非常に多くのビューポートの可能性があるため、特定のデバイスにブレークポイントを一致させることは、効率的な戦略のようには思えません。人気のあるもの、新しいもの、変更されたものに追いつくだけで終わりのないタスクになります。

より良いアプローチは、コンテンツとレイアウトに基づいてブレークポイントを設定することです

このアプローチでは、サイトは現在の一般的な画面サイズをターゲットとする人工的なブレークポイントではなく、自然なブレークポイントを使用してallビューポートサイズに適応します。

この方法はとてもシンプルで、簡単に信じがたいことがあります

  1. デスクトップやラップトップ上であなたのウェブサイトを実行します。
  2. あなたがブラウザのウィンドウを狭めるため、予告どのようにウェブサイトの応答。
  3. レイアウトが完全ではなくなるポイントに到達すると、それが最初のブレークポイントになります。
  4. その画面サイズに合わせてサイトを調整します（デバイスとは関係がない場合があります）。
  5. ブラウザのウィンドウを狭くしてください。
  6. あなたは次のレイアウトの問題を打つとき、それはあなたの第二のブレークポイントです。
  7. ...というようになど。

もちろん、モバイルファーストを設計している場合、プロセスは逆になります。狭い画面から始めて、あなたのやり方を解きます。

自然なブレークポイントを使用すると、サイトが現在および将来のあらゆるデバイスに適応するため、ビューポートサイズの巨大な宇宙に集中する必要がなくなります。

開発者1人 によれば、このアプローチはブレークポイントを元の意図に完全に合わせます：

私は確信して私たちが今までとにかく句「デバイス固有のブレークポイント」を思い付いたか...として私のきたが、それを理解していないよ、用語「ブレークポイント」（常にコンテンツやレイアウトは「ブレーク」する場所への参照でしたつまり、欠陥があるように見えます）。そのため、その時点でメディアクエリを適用する必要があります。しかし、それは単なるセマンティクスであり、コンテンツまたはレイアウトのコンテキストでブレークポイントを参照することは常識だと常に思っていました。

〜ルイLazaris、 ImpressiveWebs

ソース： https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints#comment-168596745

より多くの情報（外部サイト）：

25
Michael_B

また、device-widthモバイルサイズの場合。ただし、ユーザーがモバイル以外のデバイスでブラウザウィンドウのサイズを変更するときにモバイルスタイルを表示する場合を除きます。 widthはビューポートの幅で、device-widthは、デバイスの現在の解像度です。

また、一部のモバイルデバイスが（@mediaで）期待どおりに動作しないことを読んだと思います。

あなたは正しいです。多くのデバイスでは、widthまたはdevice-width特に、横向きと縦向きを切り替える場合に期待します（縦向きの場合に横幅を与えることがよくあります）。デバイスの自動ズームは、物事にレンチを投げることもできます。 viewport meta tag を使用すると、これらの問題の多くを解決できます。 （詳細はこちら）

43
Drew Gaynor

これは私が使用するものです...

@media screen and (max-width:320px) {}
@media screen and (min-width:321px) and (max-width:639px) {}
@media screen and (min-width:640px) and (max-width:959px) {}
@media screen and (min-width:960px) and (max-width:1279px) {}
@media screen and (min-width:1280px) and (max-width:1599px) {}
@media screen and (min-width:1600px) {}
@media screen and (min-width:1920px) {}
@media print {}

そこには、必要に応じて他のすべての種類があります（max-widthのないmin-widthまたはmin-widthのないmax-width）。しかし、これは私の基本設定です。

個人的に、私は多くの人が使用することを奇数の幅を理解していませんでした。たとえば、 20以上 には、CSS3メディアクエリの増分が480、600、768、992、1382pxの5つあります。

それは私には意味がありません。論理的な区切りは、320px（320、640、960、1280、1600、1920）の間隔です。これらのブレークは、どちらの方向のデバイスでもほとんど異なるレイアウトを提供できることに注意してください（オムニアは240x400、iphoneは320x480、droid xは480x858、ipadは768x1024、galaxy s3は720x1280、そして1920x1080タブレットを話します）。

JJ

21
doubleJ

探すべきいくつかの解像度：

iphone画面（他の多くのスマートフォンは同様の画面サイズを持っています：326 ppiで960 x 640ピクセルの解像度 http://www.Apple.com/iphone/specs.html

ipad画面（他の多くのタブレットは、1インチあたり132ピクセル（ppi）で1024 x 768ピクセルの解像度を持つ同様の画面サイズを持っています http://www.Apple.com/ipad/specs /

「通常の」画面多くの通常の画面も、以下に従って、1024 x 768ピクセルの解像度を持ちます： http://www.w3schools.com/browsers/browsers_display.asp しかし、私は彼らの信頼性を保証していません。

現在、さらにデータを探しています。

1
bigblind