9

HTML ページをモバイル ブラウザーにより適したものにするために、いくつかの CSS コードを作成しました。CSS がモバイルにのみ適用されるようにするために、次のメディア クエリを使用します。

@media only screen and (max-device-width: 480px)

iPhone 開発者として、このデバイスでテストしたところ、非常にうまく機能しました。しかし、CSS をあらゆる種類のデバイス (Android、Windows Phone など) で使用したいと考えています。

最近のほとんどのスマートフォンに適合する適切な解像度は何ですか? それとも、もっと複雑なメディア クエリが必要ですか?

4

2 に答える 2

12

最近、私はレスポンシブ Web デザインとメディア クエリを使い始めました。独自の「魔法の」クエリは見つかりませんでしたが、多くの記事と本を読んだ後、モバイル ファーストの方法で Web ページを開発しました。 、そして私はいくつかの一般的なメディアクエリを使用しています。ここにブレークポイントがあります:

  • 320 ピクセルのモバイル ポートレート
  • 480 ピクセル モバイル横向き
  • 600 px 小型タブレット
  • 768 px タブレットの縦向き
  • 1024 px タブレット ランドスケープ/ネットブック
  • 1280 ピクセル以上 — デスクトップ

( http://fluidbaselinegrid.com/から取得)

それが役に立てば幸い

于 2013-01-09T12:08:26.783 に答える
8

更新: 2016 年 3 月

プロジェクトはすべて異なるため、それらすべてに適合するグローバル ルールを設定することは困難です。探しているなら、私より賢い人が思いついた、私が以前に使用した例を次に示します。

xsmall:     (max-width: 479px),
small:      (max-width: 599px),
medium:     (max-width: 767px),
large:      (max-width: 1024px),
largeOnly:  (min-width: 768px) and (max-width: 1024px),
xxl:        (min-width: 1200px),
tall:       (min-height: 780px),

名前にデバイス、画面サイズ、または向きへの参照がないことに注意してください。「タブレットのポートレート」のサイズは、私たちにとってあまり重要ではありません。単にいくつかの画面サイズに適応するのではなく、応答性が高く、どの画面サイズでも見栄えがするようにする必要があるからです。

はい、最も一般的な画面サイズを把握し、クレイジーなメディア クエリを避けることが重要ですが、最終的には、デザインを 480px ではなく 530px などに調整する必要が出てくるかもしれません。では、なぜですか？

さて、私の個人的な好みについて：私は常にメディアクエリを念頭に置いていますが、最初はデバイスサイズをほぼ完全に無視する傾向があります. また、レイアウトを小さいサイズに調整する方が簡単なため、デスクトップ ファーストのアプローチを好みます (つまり、ページから重要でないものを削除する、サイズを縮小するなど)。

元の回答

一部の人々は、デバイスのサイズを完全に無視する傾向があります。彼らは、レイアウトが壊れ始める場所を確認し、必要な場合にのみメディアクエリを作成する必要があると言います. あなたが今行っているように、他の人はさまざまなデバイスサイズをチェックします。しかし、320px 用のメディア クエリ、480px 用の別のメディア クエリなどがあります。

というわけで、とりあえず両方やってみました。最初はデバイス サイズを無視する傾向があり、960px 以上のサイズや 320px などの小さな画面サイズ (気になる最小のデバイス サイズ) に適しているようになるまで、必要な場合 (レイアウトが崩れた場合) にのみいくつかのメディア クエリを作成します。約）。

于 2013-01-08T22:19:40.693 に答える