Untuk menulis peraturan pertanyaan media yang praktikal dan boleh dipercayai, anda mesti terlebih dahulu menggunakan resolusi min atau -webkit-min-device-pixel-nisbah untuk menentukan resolusi peranti, kemudian memuat gambar definisi tinggi melalui penggantian imej latar belakang atau SRCSET IMG, kemudian mengoptimumkan kesan paparan fon SVG dan ICON, dan perhatikan untuk mengadaptasi dan memberi perhatian kepada perintah-perintah presissi dan perintah prekegasi. Langkah-langkah khusus adalah seperti berikut: 1. Gunakan resolusi min: 2dppx atau -webkit-min-device-pixel-nisbah: 2 untuk mengesan skrin retina; 2. Tukar imej latar belakang ke versi HD melalui pertanyaan media atau secara automatik memuatkan imej penyesuaian menggunakan atribut SRCSET IMG; 3. Adalah disyorkan untuk menggunakan sebaris atau sprite untuk SVG, dan fon ikon boleh digunakan untuk menetapkan imej sandaran dengan pertanyaan media; 4. Peralatan segmentasi, memberi tumpuan kepada menyesuaikan diri dengan 1x/2x, digabungkan dengan alat penyemak imbas untuk menguji dan mengoptimumkan jumlah imej untuk meningkatkan prestasi. Menguasai perkara utama ini akan membolehkan paparan yang jelas dan keserasian yang baik.

Pertanyaan media adalah alat yang sangat praktikal untuk membuat laman web memaparkan gambar yang lebih jelas dan lebih banyak antara muka yang lebih halus pada skrin resolusi tinggi (Retina). Ringkasnya, anda boleh menggunakan pertanyaan media CSS untuk menentukan sama ada peranti pengguna mempunyai ketumpatan piksel yang tinggi, dan kemudian memuat sumber definisi yang lebih tinggi atau menyesuaikan gaya.

Kaedah berikut dapat membantu anda menulis peraturan pertanyaan media praktikal dan boleh dipercayai:

1. Gunakan min-resolution untuk menentukan resolusi skrin

Ini adalah cara yang paling mudah untuk menggunakan min-resolution untuk mengesan ketumpatan piksel peranti. Biasanya kami menggunakan piksel per inci (dpi) atau nisbah piksel peranti (DPPX) sebagai unit.

 @media sahaja skrin dan (resolusi min: 2dppx) {
  /* Gaya di bawah skrin resolusi tinggi*/
}

• Nilai yang biasa digunakan : 1.5DPPX dan 2DPPX adalah piawaian biasa untuk skrin retina.
• Nota : Terdapat sedikit perbezaan sokongan untuk penyemak imbas yang berbeza. Anda boleh menggunakan -webkit-min-device-pixel-ratio sebagai suplemen yang serasi:

 @Media sahaja skrin dan (-Webkit-min-device-pixel-ratio: 2),
       Hanya skrin dan (resolusi min: 192dpi),
       Hanya skrin dan (resolusi min: 2dppx) {
  /* Sokongan yang lebih komprehensif*/
}

2. Petua untuk menggantikan gambar definisi tinggi

Jika anda ingin memaparkan imej definisi yang lebih tinggi pada skrin retina, anda boleh menukar antara imej latar belakang yang berbeza atau SRCSETs elemen IMG melalui pertanyaan media.

Contoh gambar latar:

 .logo {
  imej latar belakang: url ('logo.png');
}

@media (resolusi min: 2DPPX) {
  .logo {
    latar belakang-imej: url ('logo@2x.png ');
    Latar Belakang: 200px 100px; /* Ditetapkan ke saiz paparan sebenar*/
  }
}

Tag <img alt="Bagaimana untuk menulis pertanyaan media untuk paparan resolusi tinggi (retina)?" > disyorkan untuk menggunakan srcset :

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

Dengan cara ini, penyemak imbas secara automatik akan memilih gambar yang sesuai berdasarkan peranti, tanpa pertanyaan media tambahan.

3. Cadangan Pengoptimuman untuk Fon Ikon atau SVG

Untuk fon ikon atau grafik SVG, ia juga boleh dijelaskan di bawah skrin retina, tetapi masih terdapat beberapa butiran untuk memberi perhatian kepada:

• Ikon SVG : Cuba gunakan SVG atau Sprite sebaris untuk mengelakkan kabur ketika zooming.
• Font Ikon : Walaupun jelas, kesan rendering sesetengah sistem tidak konsisten. Anda boleh menetapkan imej alternatif bersempena dengan pertanyaan media.
• Teks Saiz Kecil : Kadang-kadang ia kelihatan lebih nipis pada resolusi tinggi, dan ia mungkin membantu untuk meningkatkan ketebalan fon dengan sewajarnya atau menggunakan kawalan anti-aliasing seperti font-smooth atau -webkit-font-smoothing .

4. Perkara yang perlu diperhatikan dalam aplikasi praktikal

• Jangan terlalu segmen : Tidak setiap peranti perlu disesuaikan secara berasingan, cukup untuk merampas arus perdana 1x/2x.
• Ujian adalah kunci : Anda boleh mensimulasikan peranti dengan DPR yang berbeza dalam alat pemaju Chrome untuk melihat jika gaya dan imej dimuatkan dengan betul.
• Pertimbangan Prestasi : Gambar definisi tinggi lebih besar dalam saiz, ingat untuk memampatkan dan mengoptimumkan untuk mengelakkan mempengaruhi kelajuan pemuatan halaman.

Pada dasarnya itu sahaja. Ia tidak sukar untuk menulis pertanyaan media yang berguna. Kuncinya adalah untuk memahami konsep nisbah piksel peranti dan membuat penyesuaian yang munasabah berdasarkan kandungan sebenar.

Atas ialah kandungan terperinci Bagaimana untuk menulis pertanyaan media untuk paparan resolusi tinggi (retina)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!