CSS Viewport: Cara mencipta saiz teks adaptif menggunakan vw dan vmin

CSS Viewport: Cara mencipta saiz teks adaptif menggunakan vw dan vmin

Apabila membangunkan tapak web responsif, kami sering menghadapi keperluan untuk melaraskan saiz teks mengikut saiz peranti yang berbeza. Unit CSS Viewport ialah alat yang berkuasa untuk tujuan ini, dan unit vw dan vmin amat berguna untuk mencipta kesan saiz teks penyesuaian.

Viewport merujuk kepada kawasan halaman web yang pengguna lihat dalam penyemak imbas. Unit vw mewakili peratusan lebar viewport, manakala unit vmin mewakili peratusan lebar dan tinggi viewport yang lebih kecil.

Yang berikut akan memperkenalkan secara terperinci cara menggunakan unit vw dan vmin untuk melaksanakan saiz teks penyesuaian, termasuk contoh kod khusus.

Pertama, kita perlu menetapkan atribut saiz fon bagi elemen yang memerlukan saiz fon penyesuaian kepada unit relatif, seperti vw atau vmin. Berikut ialah contoh kod:

h1 {
  font-size: 6vw;
}

p {
  font-size: 3vmin;
}

Dalam contoh di atas, saiz fon tajuk h1 akan dilaraskan secara automatik mengikut lebar port pandangan, menduduki 6% daripada lebar port pandangan. Saiz fon teks perenggan akan berdasarkan lebar dan ketinggian port pandangan yang lebih kecil, menduduki 3% daripada nilai ini.

Seterusnya, kita perlu menetapkan lebar dan ketinggian viewport untuk memastikan unit vw dan vmin boleh berkuat kuasa dengan betul. Tambahkan teg meta berikut pada bahagian kepala fail HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Kod di atas menentukan lebar port pandangan untuk menjadi lebar peranti dan menetapkan penskalaan awal kepada 1.0.

Seterusnya, kita boleh menggunakan unit vw dan vmin dalam CSS untuk mencipta kesan saiz teks penyesuaian. Berikut ialah contoh kod lengkap:

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  


  
自适应标题
  
自适应文本段落。

Melalui kod di atas, kita dapat melihat bahawa tajuk dan teks perenggan pada halaman akan melaraskan saiz fon secara automatik mengikut saiz peranti, sekali gus mencapai kesan penyesuaian.

Perlu diambil perhatian bahawa walaupun unit vw dan vmin sangat mudah, ia boleh menyebabkan teks menjadi terlalu besar atau terlalu kecil dalam beberapa kes, jadi pelarasan yang sesuai perlu dibuat mengikut situasi sebenar. Di samping itu, untuk beberapa kes khas, mungkin perlu menggunakan teknik lain seperti pertanyaan media untuk mengoptimumkan lagi kebolehsuaian saiz fon.

Ringkasnya, menggunakan unit vw dan vmin CSS Viewport boleh mencapai kesan saiz teks adaptif dengan mudah. Dengan menetapkan atribut saiz fon bagi elemen, digabungkan dengan tetapan port pandangan yang sesuai, kami boleh membuat halaman web dengan mudah yang menyesuaikan dengan saiz peranti yang berbeza.

Atas ialah kandungan terperinci CSS Viewport: Cara mencipta saiz teks adaptif menggunakan vw dan vmin. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!