Bagaimanakah Saya Boleh Melaraskan Saiz Fon Secara Dinamik Berdasarkan Dimensi Bekas dalam Pembangunan Web?

Tentukan Saiz Fon Secara Dinamik Berdasarkan Saiz Bekas

Dalam pembangunan web, selalunya wajar untuk menentukan saiz fon elemen teks berbanding dengan saiz elemen yang mengandunginya, tanpa mengira lebar atau ketinggian tempat pandang. Ini boleh dicapai melalui CSS, tetapi ia memerlukan pertimbangan teliti unit saiz fon yang sesuai.

Penskalaan Peratusan Saiz Fon

Menetapkan saiz fon menggunakan peratusan, seperti dalam saiz fon: 50%, hanya akan menskalakan fon berbanding saiz fon yang diwarisi, yang tidak diingini untuk saiz semula dinamik. Menggunakan unit vw (lebar viewport) menangani isu ini:

#mydiv {
  font-size: 5vw;
}

Dalam contoh ini, saiz fon ialah 5% daripada lebar viewport, memastikan saiz teks yang konsisten tanpa mengira saiz bekas.

SVG yang dibenamkan dengan Unit Pengguna

Pendekatan alternatif ialah menggunakan SVG (Grafik Vektor Boleh Skala) dibenamkan dalam HTML. Atribut saiz fon untuk elemen teks dalam SVG boleh ditentukan dalam "unit pengguna", yang ditafsirkan secara relatif kepada dimensi port pandangan.

Sebagai contoh, jika port pandangan ditakrifkan sebagai 0 0 100 100, saiz fon 1 akan bersamaan dengan satu perseratus elemen SVG saiz.

Penghadan

Malangnya, tiada cara mudah untuk mencapai fungsi ini hanya melalui pengiraan CSS. Sebabnya terletak pada tafsiran peratusan saiz fon berdasarkan saiz yang diwarisi, bukannya dimensi bekas. Walaupun unit seperti bw (lebar kotak) secara teorinya boleh digunakan untuk tujuan ini, pelaksanaannya tidak diseragamkan pada masa ini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaraskan Saiz Fon Secara Dinamik Berdasarkan Dimensi Bekas dalam Pembangunan Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!