3

私はレスポンシブ Web デザインに不慣れで、どのメディア クエリを使用し、どのデバイスをターゲットにするかについてさまざまな設定があるため、混乱しました。基準はありますか？iPhone、iPad、その他の一般的なデバイスをターゲットにしたいと考えています。

私はウェブ上でこれを見つけました：

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

しかし、それが時代遅れかどうかはわかりません。iPhone シミュレーターを実行したところ CSS が機能しなかったため (最後の CSS ルールを参照)、どのルールが iPhone 4 を対象としているかわかりません。

4

2 に答える 2

7

メディア クエリに関する私の考えは、Web サイトのデバイスに依存しないフレームワークを作成することが目標であるべきだということです。つまり、Apple (およびその他の企業) が超高解像度画面を推進していることを考えると、解像度とピクセル密度の両方に対応する必要があるということです。

2018 更新: 私のアプローチでは、screenおよびmin-device-pixel-ratiomedia 属性が削除され、画面サイズの範囲が使用されるようになりました。現在、すべてのデバイスが として登録されてscreenおり、ほとんどすべてのデバイスが現在高解像度であるため、これらの属性は本当に必要ありません。あなたが非常にトラフィックの多いサイトにいるのであれば、それでも意味があるかもしれません.

ブレークポイントをグローバルに配置する方法は次のとおりです。

/* Below 380px is really just the iPhone SE at this point */

@media (min-width: 380px) and (max-width: 480px) {
  /* Most phones fall in here - iPhone, Galaxy, Pixel, etc */
}

@media (min-width: 480px) and (max-width: 768px) { 
  /* Phablets and Tablets - iPad, Galaxy Note, Pixel Slate, Fire */
}

@media (min-width: 768px) and (max-width: 980px) { 
  /* Small desktop, large tablet - Macbooks, sub 12" ultrabooks */
}

@media (min-width: 980px) and (max-width: 1200px) { 
  /* Medium screen desktop (up to about 24") and laptops (13" laptops) */
}

@media (min-width: 1200px) and (max-width: 1600px) {
  /* Large screen desktop (27"), laptops (15+") */
}

@media (min-width: 1600px) { 
  /* Very large screen, 4K desktop + small TVs */
}

2012 年のアドバイス: Chris Coyier の CSS-tricks.com: http://css-tricks.com/snippets/css/retina-display-media-query/に由来するデュアルマンデートの達成について見てきました。

コンセプトは、サイズに基づいて最初のブレーク ポイントを作成し、その後にピクセル密度のメディア クエリが続くようにすることです。このアプローチでは 3 つのブレークポイントが提供され、各ブレークポイントにはピクセル密度を認識するオプションがあります。

Coyier のサンプル コードを次に示します (概念を理解できるように、ベンダー固有のプレフィックスを簡略化しました)。

@media only screen and (min-width: 320px) {
  /* Small screen, non-retina */
}

@media only screen and (min-device-pixel-ratio: 2) and (min-width: 320px) { 
  /* Small screen, retina, stuff to override above media query */
}

@media only screen and (min-width: 700px) {
  /* Medium screen, non-retina */
}

@media only screen and (min-device-pixel-ratio: 2) and (min-width: 700px) {
  /* Medium screen, retina, stuff to override above media query */
}

@media only screen and (min-width: 1300px) {
  /* Large screen, non-retina */
}

@media only screen and (min-device-pixel-ratio: 2) and (min-width: 1300px){ 
  /* Large screen, retina, stuff to override above media query */
}

私はこのコンセプトがとても気に入っています。新しい高解像度デバイスに必要なものを提供しながら、帯域幅が制約されている可能性のある古いデバイスの帯域幅を節約します。ピクセル密度のメディア クエリに入れる必要がある唯一のコードは、背景画像のものであるべきです。そのため、高解像度の画像は、古いデバイスのピクセル化された対応物を上書きします。

動いているターゲットを狙っていることを認識してください ;) これは進化する概念です。幸運を。

于 2012-10-20T16:55:26.813 に答える
0

ビューポートの比率が異なる新しいデバイスが市場に登場すると、レイアウトの「ブレークポイント」はすぐに時代遅れになる可能性があります。おそらく、特定のデバイスをターゲットにするよりも、デザインを特定のデバイスに曲げるよりも、ブレークしたい場所にブレークポイントを設定するアプローチを好みます。

この記事:レスポンシブ Web デザインへのデバイスに依存しないアプローチでは、これまで以上に詳しく説明しています。

または、 320 and UpやTwitter Bootstrapなどの最も人気のあるフレームワークを参照することもできます。これらは頻繁に更新され、メディア クエリのブレークポイントを使用した適切な出発点を提供するはずです。

于 2012-10-20T09:36:15.393 に答える