メディアクエリ：デスクトップ、タブレット、モバイルをターゲットに設定するにはどうすればよいですか？

メディアクエリの調査を行っていますが、特定のサイズのデバイスをターゲットにする方法がまだわかりません。

デスクトップ、タブレット、モバイルをターゲットにしたい。多少の不一致があることは承知していますが、これらのデバイスをターゲットにするために使用できる汎用システムがあればよいでしょう。

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

# 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)

各デバイスのブレークポイントはどうあるべきですか？

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してemを取得します。たとえば、320px === 20em。

コメントに応じて、min-widthは「モバイルファースト」デザインの標準であり、最小画面のデザインから始めて、増え続けるメディアクエリを追加して、ますます大きな画面に取り組んでいます。かかわらず、あなたが好むかどうかのmin-、max-またはそれらの組合せ、複数のルールが同じ要素と一致した場合、以降のルールは以前のルールを上書きすることを念頭に置いて、あなたのルールの順序を認識すること。

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

一般的な知恵がある、特定のデバイスやサイズをターゲットにないが、用語「ブレークポイント」をリフレームします：

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

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

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

次に、「ブレークポイント」は、モバイルデザインが「ブレーク」を開始する実際のポイントとなります。メディアクエリを使用せずに適切に機能するモバイルサイトを作成したら、特定のサイズを気にせずに、連続してより大きなビューポートを処理するメディアクエリを追加するだけで済みます。

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

Lyza Gardnerのビヘイビアーブレークポイントに関する投稿と、Ethan Marcotteに関するZeldmanの投稿と、レスポンシブWebデザインが最初のアイデアからどのように進化したかをご覧ください。

セマンティックマークアップを使用する

さらに、DOM構造よりシンプルかつセマンティックとnav、header、main、section、footer（のような憎悪回避などdiv class="header"、ネストされたインナーとdiv簡単にそれは特に使用して山車を避け、エンジニアの応答になりますタグ）をCSSグリッドレイアウトを（サラDrasnerのグリッド・ジェネレータがありますRWDの設計計画に従って配置および再注文するための素晴らしいツールとflexbox。

デバイスをターゲットにしたい場合は、と書いてくださいmin-device-width。例えば：

iPhone用

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

タブレット用

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

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

• Apple iPadにWebサイトを合わせる方法
• CSS3メディアクエリ

1. このサイトを使用して、実際の数値ごとに解決策を見つけ、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;
     }
   } 
   

   このデバッグ項目をすべてのメディアクエリに追加すると、適用されているクエリが表示されます。

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) {

    }

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

/* 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 */
}

1. 超小型デバイス（携帯電話、最大480px）
2. 小型デバイス（タブレット、768px以上）
3. 中型デバイス（大きなランドスケープタブレット、ラップトップ、デスクトップ、992px以上）
4. 大型デバイス（大型デスクトップ、1200px以上）
5. 縦向きの電子書籍リーダー（Nook / Kindle）、小さいタブレット-最小幅：481ピクセル
6. 縦向きのタブレット、縦向きのiPad、横向きの電子書籍リーダー-min-width：641px
7. タブレット、ランドスケープiPad、低解像度ノートパソコン-最小幅：961ピクセル
8. HTC Oneデバイスの幅：360pxデバイスの高さ：640px -webkit-device-pixel-ratio：3
9. Samsung Galaxy S2デバイスの幅：320ピクセルデバイスの高さ：534ピクセル-webkit-device-pixel-ratio：1.5（min--moz-device-pixel-ratio：1.5）、（-o-min-device-pixel-ratio： 3/2）、（min-device-pixel-ratio：1.5
10. Samsung Galaxy S3デバイスの幅：320pxデバイスの高さ：640px -webkit-device-pixel-ratio：2（min--moz-device-pixel-ratio：2）、-古いFirefoxブラウザ（Firefox 16より前）-
11. Samsung Galaxy S4デバイスの幅：320ピクセルデバイスの高さ：640ピクセル-webkit-device-pixel-ratio：3
12. LG Nexus 4デバイスの幅：384ピクセルのデバイスの高さ：592ピクセル-webkit-device-pixel-ratio：2
13. Asus Nexus 7デバイスの幅：601ピクセルデバイスの高さ：906ピクセル-webkit-min-device-pixel-ratio：1.331）および（-webkit-max-device-pixel-ratio：1.332）
14. iPad 1および2、iPad Miniデバイス幅：768ピクセルデバイス高さ：1024ピクセル-webkit-device-pixel-ratio：1
15. iPad 3および4デバイスの幅：768ピクセルデバイスの高さ：1024ピクセル-webkit-device-pixel-ratio：2）
16. iPhone 3Gデバイスの幅：320pxデバイスの高さ：480px -webkit-device-pixel-ratio：1）
17. iPhone 4デバイスの幅：320ピクセルデバイスの高さ：480ピクセル-webkit-device-pixel-ratio：2）
18. iPhone 5デバイス幅：320ピクセルデバイス高さ：568ピクセル-webkit-device-pixel-ratio：2）

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

「@media」クエリは、ピクセル数とデバイスのピクセル比を考慮に入れているため、ページをデザインするときに実際に考慮しなければならない「仮想解像度」になります。フォントが10ピクセルの固定幅で「仮想水平解像度」は300ピクセルです。1行を埋めるには30文字必要です。

今日、最も一般的なのは網膜スクリーンデバイス、つまり高解像度で非常に高いピクセル密度（ただし、通常は6インチ未満の物理サイズ）のデバイスを見ることです。そのため、CSSにRetinaディスプレイ専用のメディアクエリが必要になります。これは私が見つけることができる最も完全な例です：

@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 Website

常に変化し、常に変化する可能性が最も高い多くのさまざまな画面サイズがあるため、最適な方法は、ブレークポイントとメディア クエリを設計に基づいて決定することです。

これを行う最も簡単な方法は、完成したデスクトップデザインを取得し、それをWebブラウザーで開くことです。画面をゆっくりと縮小して、幅を狭くします。いつデザインが「壊れる」か、ひどく窮屈に見えるかを観察してください。この時点で、メディアクエリのブレークポイントが必要になります。

デスクトップ、タブレット、電話用に3セットのメディアクエリを作成するのが一般的です。しかし、3つすべてでデザインが適切に見える場合は、必要のない3つの異なるメディアクエリを追加する複雑さを気にする必要があります。必要に応じて実行してください！

1つの追加機能は、タグのメディア属性でメディアクエリを使用することもできます<link>。

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

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

したがって、より良いユーザーエクスペリエンスを保証するため、タグでメディア属性を使用することをお勧めします<link>。

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

メディアクエリに応じて、CSSコードをさまざまなファイルに自動分離するのに役立ついくつかのツール

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

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

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

私の場合、60pxの上下は完全に機能しました！

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

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

• 非常に小さいデバイス〜電話（<768px）
• 小型デバイス〜タブレット（> = 768px）
• 中型デバイス〜デスクトップ（> = 992px）
• 大型デバイス〜デスクトップ（> = 1200px）

私は私の仕事をするために次のものを使用しています。

/* 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, 7, 8 ----------- */
@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+, 7+, 8+ ----------- */
@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 */
}

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

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

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* 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 */
}

@media (max-width: 767px)   {

      .container{width:100%} *{color:green;}-Mobile

    }


    @media (min-width: 768px)  {

     .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 768px) and (orientation:portrait)  {

       .container{width:100%} *{color:yellow  } -Mobile

    }
    @media (min-width: 1024px)  {

       .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 1200px)  {

    .container{width:1180px} *{color:pink   } -Desktop

    }