Beyond Media Queries: Menggunakan ciri HTML & CSS yang lebih baru untuk reka bentuk responsif

Reka bentuk web responsif melampaui pertanyaan media dan susun atur CSS moden seperti Flexbox dan Grid. Artikel ini meneroka teknik HTML dan CSS yang sering diabaikan untuk mewujudkan laman web yang benar-benar responsif, meminimumkan pergantungan pada pertanyaan media untuk pendekatan yang lebih semula jadi dan efisien.

Pertanyaan media menjadi tambahan apabila digunakan bersempena dengan ciri -ciri canggih ini. Mari kita meneroka bagaimana.

Gambar yang benar -benar responsif: Beyond width: 100%

Walaupun width: 100% memudahkan saiz semula imej, ia mempunyai kelemahan: distorsi imej dan muat turun besar yang tidak perlu pada peranti yang lebih kecil. Mengoptimumkan resolusi dan saiz imej adalah penting untuk prestasi. Imej resolusi tinggi harus dihidangkan ke skrin yang lebih besar, dan versi resolusi rendah kepada yang lebih kecil.

The<picture></picture> Elemen menawarkan pemilihan sumber imej yang tepat berdasarkan pertanyaan media. Daripada mengukur satu imej yang besar, kami menentukan pelbagai versi imej untuk senario yang berbeza.

<picture>
  <source media="(min-width: 1000px)" srcset="picture.png">
  <source media="(min-width: 601px)" srcset="picture-lg.png">
  <source media="(min-width: 401px)" srcset="picture-sm.png">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358939320557.png" class="lazy" alt="Beyond Media Queries: Menggunakan ciri HTML & CSS yang lebih baru untuk reka bentuk responsif">
</source></source></source></picture>

Contoh ini menggunakan picture-sm.png sebagai sandaran. Pertanyaan media mensasarkan lebar paparan spesifik, memilih imej yang sesuai. Kami juga boleh menggabungkan ketumpatan imej (1x, 2x, 3x) ke dalam atribut srcset untuk pengoptimuman selanjutnya.

The <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358939433455.png" class="lazy" alt="Beyond Media Queries: Menggunakan ciri HTML & CSS yang lebih baru untuk reka bentuk responsif"> <h3 id="Device-Resolution-Based-Styling-with-CSS-Media-Queries">Device Resolution-Based Styling with CSS Media Queries</h3> boleh menargetkan Resolusi Skrin (DPI) dan bukannya hanya saiz Viewport:

 @media sahaja skrin dan (resolusi min: 192dpi) {
  / * Gaya untuk skrin resolusi tinggi */
}

Ini membolehkan melayani imej berkualiti tinggi ke skrin resolusi tinggi. Walau bagaimanapun, bergantung semata -mata pada resolusi mungkin berfungsi dengan imej besar ke skrin kecil, jadi menggabungkan dengan pemeriksaan saiz viewport adalah disyorkan.

Contoh:

 badan {
  Latar Belakang-imej: URL (Picture-Md.png); / * Imej lalai */
}

@media sahaja skrin dan (resolusi min: 192dpi) {
  badan {
    imej latar belakang: url (gambar-lg.png); / * Imej resolusi tinggi */
    Objek-Fit: Cover;
    Posisi Objek: 100% 150%; / * Laraskan titik fokus */
  }
}

Ciri-ciri object-fit dan object-position menawarkan kawalan halus ke atas penanaman imej dan titik fokus.

Fungsi CSS: min() , max() , dan clamp()

• min() : Menetapkan saiz minimum untuk elemen. Berguna untuk mencegah teks daripada menjadi tidak dapat dibaca:

   html {
    saiz font: min (1rem, 22px); / * Saiz fon antara 16px dan 22px */
  }

• max() : Menetapkan saiz maksimum untuk elemen:

   .box {
    lebar: max (60%, 600px); / * Lebar paling banyak 60% atau 600px */
  }

• clamp() : menggabungkan min() dan max() , memberikan nilai minimum, pilihan, dan maksimum:

   .box {
    saiz font: pengapit (1rem, 40px, 4rem); / * Saiz fon dalam julat */
  }

Unit Responsif: Beyond Pixels

Faedah Reka Bentuk Responsif Dari Unit Relatif:

• vw / vh : Lebar / ketinggian Viewport.
• rem : Berkenaan dengan saiz fon unsur akar.
• em : Berkenaan dengan saiz fon elemen induk.
• % : Berkenaan dengan saiz elemen induk.

Skala Unit rem dengan perubahan saiz fon penyemak imbas, memberikan skala yang konsisten. Unit em menawarkan lebih banyak kawalan berbutir berdasarkan saiz elemen induk. vw dan vh secara langsung terikat dengan dimensi Viewport.

Bergerak melampaui pertanyaan media: Pendekatan holistik

Ciri -ciri HTML dan CSS ini memberikan kawalan yang lebih baik terhadap respons, melengkapi dan bukannya menggantikan pertanyaan media. Mereka menawarkan kawalan yang lebih baik ke atas pengalaman pengguna di pelbagai peranti dan saiz skrin. Dengan memanfaatkan teknik ini, pemaju boleh membuat reka bentuk responsif yang lebih mantap dan cekap.

Atas ialah kandungan terperinci Beyond Media Queries: Menggunakan ciri HTML & CSS yang lebih baru untuk reka bentuk responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!