48

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

私はおそらく最大幅を持っているでしょう（完全に流動的になることはありません）私はおそらく3-5セットの幅を持ち、それらの間の小さなCSS3トランジションを楽しんでいると思います（CSSトリックの動作と同様）。

現在、私が使用している数字はやや恣意的です。

@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){...}

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

4

5 に答える 5

44

device-widthまた、モバイル以外のデバイスでブラウザウィンドウのサイズを変更するときにユーザーにモバイルスタイルを表示させたい場合を除いて、モバイルサイズに使用することを強くお勧めします。widthはビューポートの幅であり、device-widthはデバイスの現在の解像度です。

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

あなたは正しいです。多くのデバイスは、特に横向きと縦向きを切り替えるときに、期待どおりのwidthまたは期待どおりの機能を提供しません（縦向きの場合は横向きの幅を提供することがよくあります）。device-widthデバイスの自動ズームは、物事にレンチを投げ込むこともできます。ビューポートメタタグを使用すると、これらの問題の多くに役立ちます。（詳細はこちら）

于 2011-12-19T17:26:28.537 に答える
35

メディアクエリのブレークポイントを決定するときは、次の現実を考慮してください。

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

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

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

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

この方法はとてもシンプルで簡単なので、信じられないかもしれません。

  1. デスクトップまたはラップトップでWebサイトを実行します。
  2. ブラウザウィンドウを狭めると、Webサイトの応答に注意してください。
  3. レイアウトが完全ではなくなった時点で、それが最初のブレークポイントになります。
  4. その画面サイズに合わせてサイトを調整します（デバイスとは関係がない場合があります）。
  5. ブラウザウィンドウを絞り続けます。
  6. 次のレイアウトの問題が発生したとき、それが2番目のブレークポイントです。
  7. ...などなど。

もちろん、モバイルファーストで設計している場合は、プロセスが逆になります。狭い画面から始めて、徐々に進んでいきます。

自然なブレークポイントを使用すると、サイトが現在および将来のどのデバイスにも適応するため、ビューポートサイズの巨大な世界に焦点を合わせる必要がなくなります。

ある開発者によると、このアプローチはブレークポイントを元の意図に完全に循環させます。

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

〜Louis Lazaris、ImpressiveWebs

ソース： https ：//responsedesign.is/articles/why-you-dont-need-device-specific-breakpoints#comment-1685967450

詳細情報（外部サイト）：

于 2016-03-20T14:26:46.067 に答える
22

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

@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 {}

必要に応じて、他にもさまざまな種類があります（最大幅なしの最小幅、または最小幅なしの最大幅）が、これが私の基本設定です。

個人的には、多くの人が使う奇妙な幅を理解できませんでした。たとえば、320以上には、480、600、768、992、1382pxの5つのCSS3メディアクエリの増分があります。

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

JJ

于 2012-06-30T16:17:11.213 に答える
1

探すべきいくつかの解決策：

iphone画面（他の多くのスマートフォンの画面サイズは類似しています：解像度960 x640ピクセル（326 ppi） http://www.apple.com/iphone/specs.html

ipad画面（他の多くのタブレットは、同様の画面サイズで1024 x 768ピクセルの解像度、132ピクセル/インチ（ppi） http://www.apple.com/ipad/specs/

http://www.w3schools.com/browsers/browsers_display.aspによると、「通常の」画面の多くの通常の画面の解像度も1024 x 768ピクセル ですが、その信頼性を保証するものではありません。

私は今より多くのデータを探しています。

于 2011-12-19T17:17:57.847 に答える
0

私自身のニーズに基づいて、私は次のことを思いつきました...私はこのブレークポイントを「成熟した目のために」または「40+」と呼びます:)

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body { font-size: 18px; }            /* some font size for small viewport */

/* small viewport navigation (hamburger) */ 
      
@media screen and (min-width: 1100px) {
body { font-size: 20px; }            /* some font size for big viewport */
/* css for big viewport navigation */
}

@media screen and (min-width: 1540px) {
body { font-size: 22px; }              /* some font size for large viewport */
/* eventually css for large viewport */
}

</style>
</head>

小さなビューポート-@mediaなし/小さなビューポートメニュー、小さなフォント..

大きなビューポート-@media| 最小幅：1100px /大きなビューポートメニュー、中間フォント..

大きなビューポート-@media| 最小幅：1540px/大きなフォント..

なぜ1100pxと1540px？もちろん個人的なことですが、誰かにとって面白いかもしれません...私の目のため、私はWindows 125％スケーリングを使用し、1920pxモニターでは1536pxになります。1366pxのモニターと125％のスケーリングを備えた私の10インチのラップトップでは、約1093pxになります（1100pxは、最終的には横向きの将来の大解像度携帯電話をカバーします）。

ここで、使用する場合のスケーリングを確認できます：www.sirmium.org/test/px.html

ここでは、上記のブレークポイントの例（フォントスケーリング）を見つけることができます：www.sirmium.org/test/breakpoints.html

PSもちろん、ミドルビューポートなどを追加できます...

于 2021-02-15T00:31:37.923 に答える