Artikel ini, sebahagian daripada Siri Pembangunan Web Microsoft, meneroka imej yang responsif - aspek penting untuk mewujudkan laman web yang berfungsi dengan sempurna merentasi pelbagai peranti. Ia tidak lagi pilihan; Ini adalah keperluan dalam dunia berbilang peranti kita.
Takeaways utama:
Gunakan atribut - untuk menawarkan pelbagai sumber imej yang dioptimumkan untuk nisbah piksel peranti yang berbeza.
srcset
Gabungkan - dengan atribut
srcset
untuk menentukan saiz paparan imej berbanding dengan viewport, membimbing penyemak imbas untuk memilih imej yang terbaik. sizes
memanfaatkan elemen - untuk fleksibiliti yang dipertingkatkan, membolehkan pemilihan imej berdasarkan keadaan media (seperti pertanyaan media CSS) dan menyokong pelbagai format imej melalui atribut
<picture></picture>
. type
Sentiasa sertakan imej lalai menggunakan atribut - sebagai sandaran untuk penyemak imbas yang kurang
src
sokongan. srcset
Responsif dan prestasi ujian secara menyeluruh merentasi pelbagai peranti dan penyemak imbas menggunakan alat seperti yang ditawarkan oleh Microsoft untuk pemeriksaan keserasian dan pengoptimuman pengalaman web. -
Memahami Imej Responsif:
Imej responsif menyesuaikan persembahannya ke peranti tontonan. "Bentuk terbaik" bermaksud perkara yang berbeza:
memaparkan aset imej yang berbeza berdasarkan saiz skrin (mis., Imej yang berbeza untuk komputer riba 13.5 inci berbanding telefon 5 inci). -
menggunakan imej yang berbeza berdasarkan resolusi peranti (atau nisbah peranti-piksel-nisbah piksel peranti ke piksel CSS). -
Memilih format imej (seperti JPEG XR) jika disokong oleh penyemak imbas, berpotensi untuk pemampatan yang lebih baik. -
Mengaktifkan imej responsif:
Walaupun kaedah skrip yang lebih lama wujud, mereka tidak disyorkan kerana isu -isu yang berpotensi dengan pelbagai muat turun atau imej yang hilang. Pendekatan pilihan menggunakan:
- atribut
srcset
- atribut
sizes
- elemen
<picture></picture>
atribut : srcset
sebelum menyelam ke
penggunaan, mari kita tentukan: srcset
Nisbah peranti-piksel peranti:
Ketumpatan piksel peranti (piksel fizikal per inci): Peranti resolusi yang lebih tinggi mempunyai ketumpatan yang lebih tinggi dan dengan itu nisbah peranti piksel yang lebih tinggi pada tahap zoom yang sama.
Tahap Zum Penyemak Imbas: Tahap zum yang lebih tinggi meningkatkan nisbah peranti-piksel untuk peranti tertentu.
-
BASIC Pelaksanaan menggunakan - deskriptor untuk nisbah peranti-piksel:
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027748422704.jpg" class="lazy" alt="How to Build Responsive Images with srcset " />
Salin selepas log masuk
- 1x: untuk nisbah peranti-piksel 1.
space-needle.jpg
2x: - untuk nisbah peranti-piksel 2.
space-needle-2x.jpg
3x: untuk nisbah peranti-piksel 3. -
space-needle-hd.jpg
atribut
berfungsi sebagai sandaran untuk penyemak imbas tanpa sokongan. Deskriptor src
menentukan lebar imej: srcset
w
<img src="/static/imghw/default1.png" data-src="images/space-needle.jpg" class="lazy" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="Cara membina imej responsif dengan srcset" >
Salin selepas log masuk
atribut : sizes
Untuk mengawal saiz imej berdasarkan saiz viewport, gunakan atribut
dengan deskriptor dalam sizes
. w
srcset
Contoh 1 (imej pada setengah lebar viewport):
Contoh 2 (saiz responsif berdasarkan lebar viewport): <img src="/static/imghw/default1.png" data-src="images/space-needle.jpg" class="lazy" sizes="50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="Cara membina imej responsif dengan srcset" >
Salin selepas log masuk
elemen <img src="/static/imghw/default1.png" data-src="images/space-needle.jpg" class="lazy" sizes="(max-width: 40em) 100vw, 50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="Cara membina imej responsif dengan srcset" >
Salin selepas log masuk
:
<picture>
elemen membolehkan pemilihan imej berdasarkan keupayaan saiz dan penyemak imbas yang diberikan. Ia mengandungi unsur -unsur
dengan atribut , <picture>
, <source>
, dan srcset
. An sizes
media
type
(Nota: Sumber dan saiz imej adalah ilustrasi.) <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027748575415.png" class="lazy" alt="How to Build Responsive Images with srcset " />
</picture>
Kesimpulan:
Imej responsif meningkatkan pengalaman pengguna di seluruh peranti. Melaksanakannya untuk prestasi laman web yang optimum. Sumber dan alat selanjutnya dari Microsoft tersedia untuk ujian silang pelayar dan amalan terbaik pembangunan web. Seksyen Soalan Lazim terperinci berikut, menangani soalan -soalan umum mengenai pelaksanaan .
Atas ialah kandungan terperinci Cara membina imej responsif dengan srcset. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!