max-device-widthまたはmax-widthを使用する必要がありますか？
CSSメディアクエリでは、max-device-widthを使用してデバイスの幅（iPhoneやAndroidデバイス）など）および/またはページの幅をターゲットにするmax-widthを使用できます。
max-device-widthを使用する場合、デスクトップのブラウザーウィンドウのサイズを変更しても、デスクトップのサイズは変更されないため、CSSは変更されません。
max-widthを使用している場合、デスクトップのブラウザーウィンドウのサイズを変更すると、タッチ対応の要素やメニューなど、モバイル向けのスタイルが表示される場合があります。
特定のブラウザ（およびデバイス？）をターゲットにすることは非推奨になりました。ターゲットを少しだけ意識する必要があります。メディアクエリにも適用されますか？
なぜ他のターゲットよりも1つをターゲットとするのですか？推奨されるのはどれですか？
これは、私が本番Webサイトで使用するメディアクエリの例です。
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {
/* Change a menu to fit the screen better, etc... */
}
max-device-widthとmax-widthの両方を使用する傾向があります。
TL; DR
レスポンシブWebサイトを作成している場合は、メディアクエリでmin-width/max-widthではなくmin-device-width/max-device-widthを使用して、より広い範囲の画面サイズをターゲットにします。
2018 Media Queries Level 4 specification draft によると、device-widthメディア機能はdeprecatedです。後方互換性のために保持されますが、避ける必要があります。
ビューポート（またはページメディアのページボックス）のサイズを照会するには、
aspect-ratio、device-width、およびdevice-heightではなく、width、height、およびdevice-aspect-ratioメディア機能を使用する必要があります。レイアウトされるドキュメントに使用可能なスペースの量に関係なく、デバイスの物理サイズに合わせて調整されます。device-*メディア機能は、モバイルデバイスを検出するためのプロキシとしても使用される場合があります。代わりに、作成者は、スタイリングしようとしているデバイスの側面をよりよく表すメディア機能を使用する必要があります。
サイドノートとして、ドキュメントの<head>セクションで viewport meta tag を指定することを忘れないでください：
<meta name="viewport" content="width=device-width, initial-scale=1">
説明
特定のデバイスが持つ可能性のあるさまざまな画面解像度とピクセル密度により、 ピクセルはピクセルではありません デバイスの向き、アスペクト比など）。この場合、ピクセルは実際には物理的なハードウェアピクセルではなく 「光学基準ユニット」 と呼ばれます。
幸いなことに、ブラウザのビューポートの幅とスケーリングを制御するために、ドキュメントの<head>セクションで viewport meta tag を指定できます。このタグのcontent値がwidth=device-widthの場合、画面の幅は デバイスに依存しないピクセルに一致 になり、すべての異なるデバイスが一貫してスケーリングおよび動作するようになります。
<meta name="viewport" content="width=device-width, initial-scale=1">
メディアクエリに関しては、おそらくmax-widthはビューポート（現在のブラウザーウィンドウ）をターゲットとするのに対して、max-device-widthはデバイスの実際のフルスクリーンサイズ/解像度をターゲットとするため、max-widthではなくmax-device-widthを使用する必要があります。
つまり、max-device-widthを使用している場合、max-widthとは異なり、デバイスの実際の全画面サイズのみが考慮されるため、デスクトップブラウザーのサイズ変更時に異なるメディアクエリが適用されることはありません。ブラウザウィンドウの現在のサイズではありません。
アダプティブレイアウトを作成しようとしている場合、ブラウザのサイズを変更するとサイトが応答しなくなるため、これは大きな違いになります。さらに、max-device-widthを使用している場合、ブラウザ画面のサイズを小さくして上記の小さな画面サイズに合わせても、小さな画面のデバイスをターゲットにするために使用しているメディアクエリはデスクトップに適用されません。
2018年の時点で、最新の メディアクエリ仕様ドラフト は実際にdevice-widthメディア機能を非推奨にしているため、回避する必要があります。
さらに、これは Google Developersの記事 はmax-device-widthの使用を非常に推奨しません：
Google Developers-Web Fundamentals-レスポンシブCSSメディアクエリ
*-device-widthに基づいてクエリを作成することもできます。ただし、この方法は強くお勧めしません。違いはわずかですが、非常に重要です。
min-widthはブラウザウィンドウのサイズに基づいていますが、min-device-widthは画面のサイズに基づいています。残念ながら、従来のAndroidブラウザーを含む一部のブラウザーは、デバイスの幅を適切に報告せず、代わりに予想されるビューポートの幅ではなくデバイスのピクセルで画面サイズを報告する場合があります。さらに、
*-device-widthを使用すると、クエリがブラウザウィンドウのサイズではなく実際のデバイスサイズに基づいているため、ウィンドウのサイズ変更を許可するデスクトップまたはその他のデバイスでコンテンツが適応できなくなります。
参考文献：
デバイスの幅を避けてください。その理由は、ユーザーのブラウザーがそれにどのように応答するかを知ることができないからです。
IOSの場合、少なくともSafariの場合は単純なようです。これは、方向とは無関係の1つのデバイス幅の応答のようです。また、デバイスの幅は、デバイスの短辺についてのみ記載されています。これをiPhone 4SとiPadでテストしました。彼らは、方向に関係なく、それぞれ320と768に反応しました。
Androidそれは予測不能です。HuaweiAscend Y330で6つのブラウザー（Androidのデフォルトのブラウザー、Chrome、Opera、Firefox、Firefox Beta、Dolphin）をテストしました。応答はブラウザーのタイプと向きによって異なります。 。
クエリ（max-device-width：*** px）を含むページでテストし、クエリをtrue状態にするために入力する必要があるpx-valueを見つけました。ブラウザの種類と向きに応じて、4つの異なる値（320、480、534、800）が必要でした。これにより、デバイスの幅が使用できなくなります。
Max-widthを使用している場合、デスクトップのブラウザーウィンドウのサイズを変更すると、タッチ対応の要素やメニューなど、モバイル向けのスタイルが表示される場合があります。
これが望ましいというのが一般的な意見のように思えるのは衝撃的です。モバイル前の液体/液体の設計が、間違った理由または正しい理由で悪いと考えられていたかどうかはわかりませんでした。これは単なるリキッドレイアウトのより洗練されたバージョンであるように思えますが、デザイナーが何らかの理由で採用しているものです。
全体のデザインコミュニティが2000年代半ばに液体よりもレイアウトを固定することを選択したのは、テキストのリフローが読みやすさを妨げ、未亡人やその他の誤植を引き起こすことが多かったためです。さらに、コードベースを維持することは、要素の衝突などを防ぐために設計から設計までしばしばトリッキーです。リキッドレイアウトとレスポンシブデザインの唯一の違いは、優れたブラウザと石積みのようなフレームワークの普及によりレスポンシブであることです。
私は個人的にmin/max-device-widthを使用しています。何十年も前からあるデスクトップドキュメントの規則に従うことを好むからです。インターネットで開いたすべてのドキュメントがデスクトップでこのように動作するわけではなく、デスクトップにロードした他の種類のドキュメントやアプリケーションも同じように動作しません。 MS WordやPhotoshopなどのように、モバイルが優位になる前に設計されたページはスクロール位置を保持し、レイアウトを変更しないため、ユーザーがウィンドウ管理の無関係なタスクを実行するときにページフロー内のコンテンツを追跡できます。
通常、3つのブレークポイントを使用します。1つは電話用、1つはタブレット用、もう1つはデスクトップ用です。デスクトップおよび多くの場合少なくとも横長のポートレートは固定され、タブレットのポートレート以下は液体です。アダプティブとレスポンシブのこの組み合わせにより、デスクトップをデスクトップサイトのように動作させながら、10奇数個の固定幅のモバイルデバイスレイアウトをレイアウトする必要がなくなります。ビューポートはサイズ変更できないため、モバイルデバイスではテキストはリフローしません。