実用的で信頼できるメディアクエリルールを作成するには、最初に最小解像度または-webkit-min-device-pixel-ratioを使用してデバイスの解像度を決定する必要があります。次に、背景畫像置換またはIMGのSRCSETを介して高解像度の寫真をロードし、SVGとアイコンフォントのディスプレイ効果を最適化し、主流のデバイスとパフォーマンスのテストに注意を払う必要があります。特定の手順は次のとおりです。1。最小解像度：2DPPXまたは-WebKit-Min-Device-Pixel-Ratio：2を使用して、網(wǎng)膜畫面を検出します。 2.メディアクエリを介して背景畫像をHDバージョンに切り替えるか、IMGのSRCSET屬性を使用して適応畫像を自動的にロードします。 3. svgにインラインまたはスプライトを使用することをお勧めします。アイコンフォントを使用して、メディアクエリでバックアップ畫像を設定できます。 4.セグメンテーション機器は、1x/2xへの適応に焦點を當て、ブラウザツールと組み合わせて、畫像量をテストおよび最適化してパフォーマンスを向上させます。これらの重要なポイントをマスターすると、明確な表示と適切な互換性が可能になります。

メディアクエリは、Webページに高解像度（網(wǎng)膜）畫面により明確な寫真やより繊細なインターフェイスを表示するための非常に実用的なツールです。簡単に言えば、CSSメディアクエリを使用して、ユーザーのデバイスのピクセル密度が高いかどうかを判斷し、高解像度リソースをロードするか、スタイルを調(diào)整できます。

次の方法は、実用的で信頼できるメディアクエリルールを作成するのに役立ちます。

1. min-resolutionを使用して、畫面解像度を決定します

これはmin-resolutionを使用してデバイスのピクセル密度を検出する最も簡単な方法です。通常、単位として1インチあたりのピクセル（DPI）またはデバイスピクセル比（DPPX）を使用します。

 @mediaのみの畫面と（最小解像度：2dppx）{
  /*高解像度の畫面下のスタイル*/
}

• 一般的に使用される値：1.5DPPXと2DPPXは、網(wǎng)膜畫面の一般的な標準です。
• 注：さまざまなブラウザのサポートにはわずかな違いがあります。 -webkit-min-device-pixel-ratio互換性のあるサプリメントとして使用できます。

 @mediaのみの畫面と（-webkit-min-device-pixel-ratio：2）、
       スクリーンと（最小解像度：192dpi）のみ、
       スクリーンと（最小解像度：2dppx）{
  /*より包括的なサポート*/
}

2。高解像度の寫真を交換するためのヒント

Retina畫面に高解像度の畫像を表示する場合は、メディアクエリを使用して、異なる背景畫像またはIMG要素のsrcsetを切り替えることができます。

背景畫像例：

 .logo {
  背景畫像：url（ 'logo.png'）;
}

@media（最小解像度：2dppx）{
  .logo {
    背景イメージ：url（'logo@2x.png '）;
    バックグラウンドサイズ：200px 100px; /*実際の表示サイズに設定*/
  }
}

<img alt="高解像度（Retina）ディスプレイのメディアクエリを作成する方法は？" >タグは、 srcsetを使用するために推奨されます。

 <img src = "image.png" srcset = "image@2x.png 2x" alt = "logo">

このようにして、ブラウザは、追加のメディアクエリなしで、デバイスに基づいて適切な畫像を自動的に選択します。

3。アイコンフォントまたはSVGの最適化提案

アイコンフォントまたはSVGグラフィックの場合、Retina畫面の下で明確に保つこともできますが、注意を払う詳細がまだあります。

• SVGアイコン：インラインSVGまたはスプライトを使用して、ズーム時にぼやけないようにしてください。
• アイコンフォント：明確ですが、一部のシステムのレンダリング効果は一貫していません。メディアクエリと組み合わせて代替畫像を設定できます。
• 小型のテキスト：高解像度で薄く見える場合があり、フォントの厚さを適切に上げたり、 font-smoothや-webkit-font-smoothingなどのアンチエイリアシングコントロールを使用すると役立つ場合があります。

4。実際のアプリケーションで注意すべきこと

• オーバーセグメント：すべてのデバイスを個別に調(diào)整する必要があるわけではなく、主流の1x/2xを押収するだけで十分です。
• テストが重要です。Chrome開発者ツールにDPRが異なるデバイスをシミュレートして、スタイルと畫像が正しく読み込まれているかどうかを確認できます。
• パフォーマンスの考慮事項：高解像度の寫真のサイズが大きいので、ページの読み込み速度に影響を及ぼさないように、圧縮して最適化することを忘れないでください。

基本的にそれだけです。有用なメディアクエリを書くことは難しくありません。重要なのは、デバイスピクセル比の概念を理解し、実際のコンテンツに基づいて合理的な適応を行うことです。

以上が高解像度（Retina）ディスプレイのメディアクエリを作成する方法は？の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。