web-dev-qa-db-ja.com

メディアクエリ：デスクトップ、タブレット、モバイルをターゲットにする方法

私はメディアクエリについていくつかの研究をしてきましたが、それでも特定のサイズのデバイスをターゲットにする方法をよく理解していません。

デスクトップ、タブレット、モバイルをターゲットにしたい。多少の食い違いがあることを私は知っていますが、これらの装置を対象とするために使用できる一般的なシステムを持つことは素晴らしいことです。

私が見つけたいくつかの例：

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px)

または

# Phone
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)

これらの「ブレークポイント」は各デバイスにどうあるべきだと思いますか？

csscss3mobilemedia-queriestablet
406
betamax

IMOこれらは最高のブレークポイントです：

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

編集 ：960グリッドでよりうまく動くように改良された：

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

実際には、多くの設計者はピクセルをemsに変換します。主にb/c emsはズーミングの余裕があります。標準ズームでは1em === 16px。ピクセルを1em/16pxで乗算してemsを取得します。たとえば、320px === 20emです。

コメントに応えて、min-widthは「モバイル優先」デザインの標準です。ここでは、最初に最小の画面用に設計し、次に増え続けるメディアクエリを追加して、ますます大きな画面に進むことにします。 min-、max-、またはそれらの組み合わせを好むかどうかにかかわらず、複数のルールが同じ要素に一致する場合、後のルールが前のルールをオーバーライドすることに留意してください。

552
ryanve

あなたがデバイスをターゲットにしたいのなら、min-device-widthを書くだけです。例えば：

IPhone用

@media only screen and (min-device-width: 480px){}

タブレット用

@media only screen and (min-device-width: 768px){}

ここにいくつかの良い記事があります：

147
sandeep

特定のデバイスやサイズをターゲットにしないでください！

一般的な知恵 は特定のデバイスまたはサイズを対象としないですが、「ブレークポイント」という用語を再構成するためです：

  • mobile first のサイトを開発します。ピクセルではなく、パーセンテージまたはemsを使用します。
  • 次に、より大きなビューポートで試してみて、どこで失敗するかを確認します。
  • 壊れた部分を処理するためだけにレイアウトを再設計し、CSSメディアクエリを追加します。
  • 次のブレークポイントに到達するまでプロセスを繰り返します。

responsivepx.com を使用して、 'breakpoints are dead' by Marc Drummond のように、「自然な」ブレークポイントを見つけることができます。

自然なブレークポイントを使用する

その後、「ブレークポイント」がモバイルデザインが「ブレーク」を開始する実際のポイントになります。つまり、使用できなくなるか、視覚的に快適になります。メディアクエリを使用せずに適切なモバイルサイトを作成したら、特定のサイズを気にせずに、連続して大きなビューポートを処理するメディアクエリを追加するだけです。

デザインを正確な画面サイズに固定しようとしない場合、このアプローチは特定のデバイスをターゲットにする必要性を取り除くによって機能します。 各ブレークポイントでの設計自体の整合性は、任意のサイズで保持されることを保証します。つまり、特定のサイズでメニュー/コンテンツセクションなどが使用できなくなる場合、そのサイズのブレークポイントを設計します、not特定のデバイスサイズ。

Lyza Gardnerの behavioural breakpoints の投稿、およびZeldmanのEthan Marcotteについての投稿と 初期のアイデアからのレスポンシブWebデザインの進化 を参照してください。

138
Dave Everitt

  1. 私はこの site を使用して、実際の数あたりの解像度と開発されたCSSを見つけました。私のCSSが実際に目的のデバイスにアクセスすることを除いて、私の数字は上記の答えとはかなり異なります。

  2. また、メディアのクエリの直後にこのデバッグ用のコードを用意してください。

    @media only screen and (min-width: 769px) and (max-width: 1281px) { 
  /* for 10 inches tablet screens */
  body::before {
    content: "tablet to some desktop media query (769 > 1281) fired";
    font-weight: bold;
    display: block;
    text-align: center;
    background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
  }
}

    このデバッグ項目を各メディアクエリに追加すると、どのクエリが適用されたかがわかります。

46
user2060451

Twitter Bootstrapが推奨する最高のブレークポイント

/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }
22
Santosh Khalse

一般的なデバイスブレークポイントに対するメディアクエリ

/* 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 */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

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

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
21
Purvik Dhorajiya
  1. 超小型デバイス（電話、最大480px）
  2. 小型デバイス（タブレット、768px以上）
  3. 中型のデバイス（大きな風景タブレット、ラップトップ、およびデスクトップ、992ピクセル以上）
  4. 大型デバイス（大型デスクトップ、1200ピクセル以上）
  5. ポートレート電子書籍リーダー（Nook/Kindle）、小さいタブレット - 最小幅：481px
  6. 縦向きタブレット、縦向きiPad、横置き電子書籍リーダー - min-width：641px
  7. タブレット、横型iPad、低解像度ラップトップ - 最小幅：961px
  8. HTC 1つのデバイスの幅：360ピクセルデバイスの高さ：640ピクセル - ウェブキット - デバイスピクセル比：3
  9. サムスンギャラクシーS2デバイスの幅：320ピクセルデバイスの高さ：534ピクセル - ウェブキット - デバイスのピクセル比：1.5（分 - モズ - デバイスのピクセル比：1.5）、（ - o - 分 - デバイスのピクセル比： 3/2）、（最小デバイス画素比：1.5
  10. サムスンギャラクシーS3デバイスの幅：320ピクセルのデバイスの高さ：640ピクセル - ウェブキット - デバイスのピクセル比：2（分 - mozデバイスのピクセル比：2）、 - - 古いFirefoxブラウザ（Firefox 16以前） -
  11. サムスンギャラクシーS4デバイスの幅：320ピクセルデバイスの高さ：640ピクセル - ウェブキット - デバイスピクセル比：3
  12. LG Nexus 4デバイスの幅：384ピクセルデバイスの高さ：592ピクセル - ウェブキット - デバイスピクセル比：2
  13. Asus Nexus 7のデバイスの幅：601ピクセルxデバイスの高さ：906ピクセルx -webkit-min-device-pixel-ratio：1.331）および（-webkit-max-device-pixel-ratio：1.332）
  14. iPad 1と2、iPad Miniのデバイス幅：768ピクセルデバイスの高さ：1024ピクセル - ウェブキット - デバイスピクセル比：1
  15. iPad 3および4のデバイス幅：768ピクセルデバイスの高さ：1024ピクセル - ウェブキット - デバイスのピクセル比：2）
  16. iPhone 3Gのデバイスの幅：320ピクセルデバイスの高さ：480ピクセル - ウェブキット - デバイス - ピクセル - 比率：1）
  17. iPhone 4デバイスの幅：320ピクセルデバイスの高さ：480ピクセル - ウェブキット - デバイスのピクセル比：2）
  18. iPhone 5デバイスの幅：320ピクセルデバイスの高さ：568ピクセル - ウェブキット - デバイスのピクセル比：2）
18
Web Designer cum Promoter

これはピクセル数の問題ではなく、画面上の文字の実際のサイズ（mmまたはインチ）の問題であり、ピクセル密度によって異なります。したがって、 "min-width："と "max-width："は役に立ちません。この問題の完全な説明はここにあります： 正確にデバイスのピクセル比は何ですか？

"@ media"クエリではピクセル数とデバイスのピクセル比率が考慮されるため、ページのデザイン時に実際に考慮する必要があるのは "仮想解像度"になります。フォントが10ピクセル固定幅の場合「水平方向の仮想解像度」は300ピクセルで、1行を埋めるには30文字が必要です。

5
jumpjack

常に変化し、常に変化する可能性が最も高いさまざまな画面サイズがあるので、 ブレークポイント および media query をデザインに基づいて設定することが最も効果的です。

これを実行する最も簡単な方法は、完成したデスクトップデザインを取得してWebブラウザで開くことです。 縮小 画面 ゆっくり 狭くする。デザインが開始されるタイミング、 "break" を確認するか、またはひどくて窮屈に見えます。この時点で、メディアクエリによるブレークポイントが必要になります。

デスクトップ、タブレット、電話に対して3セットのメディアクエリを作成するのが一般的です。しかし、もしあなたのデザインが3つすべてに似合っているようなら、不要な3つの異なるメディアクエリーを追加するという複雑さに悩まされるのはなぜでしょうか。 必要に応じて実行してください。

4
Robert Rocha

今日最も一般的なことは、網膜スクリーンデバイス、つまり高解像度と非常に高いピクセル密度（しかし通常は6インチ物理サイズよりも小さい）を備えたデバイスを見ることです。だからこそ、あなたのCSSには網膜に特殊なメディアクエリを表示させる必要があるでしょう。これは私が見つけることができる最も完全な例です：

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  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 (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  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 (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

ソース： CSS-Tricksウェブサイト

2
Ezequiel Adrian

デスクトップ上で動作は変わりません。しかし、タブレットや携帯電話では、大きなロゴ画像をカバーするようにナビゲーションバーを拡張します。 注： ロゴの高さに応じて、マージン（上下）を使用してください。

私の場合は、上下60pxが完璧に機能しました。

@media (max-width:768px) { 
  .navbar-toggle {
      margin: 60px 0;
  }
}

ナビゲーションバーを確認してください ここ 。

2
Pratik Khadloya

もう1つの機能は、<link>タグの media 属性でuse-mediaクエリを使用できることです。

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

これにより、 media 属性に関係なく、ブラウザはすべてのCSSリソースをダウンロードします。 違いは、media属性のmedia-queryがfalseと評価された場合、その.cssファイルとそのコンテンツはレンダリングをブロックしないということです。

そのため、<link>タグでmedia属性を使用することをお勧めします。これは、より良いユーザーエクスペリエンスを保証するためです。

こちらでこの問題に関するGoogleの記事を読むことができます https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

あなたのメディアクエリに従って異なるファイルにあなたのCSSコードの分離を自動化するのを助けるであろういくつかのツール

Webpack https://www.npmjs.com/package/media-query-pluginhttps://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query

1
Juanma Menendez
  • 超小型デバイス〜電話（<768px）
  • 小型デバイス〜タブレット（> = 768px）
  • 中型のデバイス〜デスクトップ（> = 992px）
  • 大型デバイス〜デスクトップ（> = 1200px）
0
bekzat