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

Question

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

デスクトップ、タブレット、モバイルをターゲットにできるようにしたいと考えています。いくつかの不一致があることは知っていますが、これらのデバイスをターゲットにするために使用できる汎用システムがあると便利です。

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

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

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

Answer 1

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に変換します。これは、主にemsの方がズームが優れているためです。標準ズーム1em === 16pxでは、ピクセルを乗算してs1em/16pxを取得しますem。たとえば、320px === 20em。

コメントに応えて、min-widthは「モバイルファースト」デザインの標準です。最初は最小の画面用にデザインし、次に増え続けるメディアクエリを追加して、ますます大きな画面に進んでいきます。

min-、、またはそれらの組み合わせを好むかどうかに関係なく、max-複数のルールが同じ要素に一致する場合、後のルールが前のルールをオーバーライドすることに注意して、ルールの順序を認識してください。

Answer 2

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

一般的な知恵は、特定のデバイスやサイズをターゲットにするのではなく、「ブレークポイント」という用語を再構成することです。

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

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

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

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

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

行動のブレークポイントに関するLyzaGardnerの投稿、およびEthan Marcotteに関するZeldmanの投稿、およびレスポンシブWebデザインが最初のアイデアからどのように進化したかを参照してください。

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

さらに、、、、などのDOM構造がよりシンプルでセマンティックになり（ネストされた内部タグのような嫌悪感を回避）、応答性を設計しやすくなります。特に、CSSグリッドレイアウトを使用してフロートを回避できます（SarahDrasnerのグリッドジェネレーターはこのための優れたツール）およびRWD設計計画に従って配置および再注文するためのフレックスボックス。navheadermainsectionfooterdiv class="header"div

Answer 3

デバイスをターゲットにする場合は、と書くだけmin-device-widthです。例えば：

iPhone用

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

タブレットの場合

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

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

• あなたのウェブサイトをAppleiPadに合わせる方法
• CSS3メディアクエリ

Answer 4

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;
     }
   } 
   

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

Answer 5

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

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

    }

ソース：https ：//scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

Answer 6

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

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

Answer 7

1. 極小デバイス（電話、最大480px）
2. 小型デバイス（タブレット、768ピクセル以上）
3. 中型デバイス（大きな横向きのタブレット、ラップトップ、デスクトップ、992px以上）
4. 大型デバイス（大型デスクトップ、1200px以上）
5. 縦向きの電子書籍リーダー（Nook / Kindle）、小さいタブレット-min-width：481px
6. ポートレートタブレット、ポートレートiPad、ランドスケープ電子書籍リーダー-min-width：641px
7. タブレット、横向きのiPad、低解像度のラップトップ-min-width：961px
8. HTC Oneデバイス-幅：360pxデバイス-高さ：640px -webkit-device-pixel-ratio：3
9. Samsung Galaxy S2デバイス-幅：320pxデバイス-高さ：534px -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. サムスンギャラクシーS4デバイス-幅：320pxデバイス-高さ：640px -webkit-device-pixel-ratio：3
12. LG Nexus 4デバイス-幅：384pxデバイス-高さ：592px -webkit-device-pixel-ratio：2
13. Asus Nexus 7デバイス-幅：601pxデバイス-高さ：906px -webkit-min-device-pixel-ratio：1.331）および（-webkit-max-device-pixel-ratio：1.332）
14. iPad 1および2、iPad Miniデバイス-幅：768pxデバイス-高さ：1024px -webkit-device-pixel-ratio：1
15. iPad 3および4デバイス-幅：768pxデバイス-高さ：1024px -webkit-device-pixel-ratio：2）
16. iPhone 3Gデバイス-幅：320pxデバイス-高さ：480px -webkit-device-pixel-ratio：1）
17. iPhone 4デバイス-幅：320pxデバイス-高さ：480px -webkit-device-pixel-ratio：2）
18. iPhone 5デバイス-幅：320pxデバイス-高さ：568px -webkit-device-pixel-ratio：2）

Answer 8

今日、最も一般的なことは、網膜スクリーンデバイス、言い換えれば、高解像度で非常に高いピクセル密度（ただし、通常は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-TricksWebサイト

Answer 9

これは、自分のWebサイトに対して「モバイルファースト」の設計をまだ行っておらず、迅速な一時的な解決策を探している人のみを対象としています。

携帯電話用

@media (max-width:480px){}

タブレットの場合

@media (max-width:960px){}

ラップトップ/デスクトップ用

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

高解像度ノートパソコンの場合

@media (max-width:1280px){}

Answer 10

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

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

Answer 11

常に変化するさまざまな画面サイズがあり、おそらく常に変化するため、最善の方法は、デザインに基づいてブレークポイントとメディア クエリを作成することです。

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

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

Answer 12

追加機能の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リソースをダウンロードします。違いは、media属性のmedia-queryがfalseと評価された場合、その.cssファイルとそのコンテンツはレンダリングをブロックしないことです。

したがって、より良いユーザーエクスペリエンスを保証するため、タグでmedia属性を使用することをお勧めします。<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

Answer 13

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

Answer 14

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

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

Answer 15

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

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

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

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

Answer 16

私にとって最良の解決策は、デバイスがモバイルであるかどうかを検出することです。

@media (pointer:none), (pointer:coarse) {
}

Answer 17

より具体的なメディアクエリを作成したい場合は、このリンクhttps://css-tricks.com/snippets/css/media-queries-for-standard-devices/からコピーされたiPhoneの例を参照してください。メディアクエリを見つけることができます。このリンクでより多くのデバイスについて）

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

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

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

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

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

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

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

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

}

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

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

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

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

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

}

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

}

Answer 18

$xs : "extra-small";
$s  : "small";
$m  : "medium";
$l  : "large";
$xl : "extra-large";

@mixin respond($breakpoint) {
  @if($breakpoint == $xs)  {
    @media only screen and (min-width: 320px) and (max-width: 479px) { @content; }
  }
  @if($breakpoint == $s)  {
    @media only screen and (min-width: 480px) and (max-width: 767px) { @content; }
  }
  @if($breakpoint == $m)  {
    @media only screen and (min-width: 768px) and (max-width: 991px) { @content; }
  }
  @if($breakpoint == $l)  {
    @media only screen and (min-width: 992px) and (max-width: 1199px) { @content; }
  }
  @if($breakpoint == $xl)  {
    @media only screen and (min-width: 1200px) { @content; }
  }
}

Galaxyfoldのように320pxよりも小さいシーン用にもう1つ追加することもできます

Answer 19

解像度だけでなく、デバイスのDPRも見つける必要があります
。whatismyscreenresolution 「デバイスピクセル比（DPR）はデバイスメーカーから提供された数値であり、HiDPI（高ドット/インチ）またはRetina（アップルの商標）ディスプレイに使用されます」

メディアクエリの例:(最小解像度：3.0dppx）

Answer 20

@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

    }