Bagaimanakah Saya Boleh Mengekalkan Saiz Fon Malar Berbanding Dimensi Bekas Dinamik?

Mencapai Saiz Font Malar Berbanding Dimensi Bekas

Apabila bekerja dengan bekas yang dimensinya berubah-ubah berdasarkan faktor luaran, tetapkan saiz fon untuk dikekalkan saiz yang konsisten berbanding bekas boleh menimbulkan cabaran. Dengan menggunakan CSS, anda boleh mengatasi halangan ini dan mencapai hasil yang anda inginkan.

Merangkul Unit Lebar Viewport: vw

Untuk menentukan saiz fon sebagai peratusan viewport lebar, gunakan vwunit. Contohnya:

#mydiv {
  font-size: 5vw;
}

Dalam contoh ini, saiz fon #mydiv akan sentiasa 5% daripada lebar viewport, tanpa mengira saiz bekas.

Memanfaatkan SVG Terbenam

Jika anda lebih suka pendekatan yang berbeza, pertimbangkan untuk memasukkan SVG terbenam dalam HTML. Gunakan atribut saiz fon untuk menentukan saiz elemen teks dalam "unit pengguna", menjajarkannya dengan dimensi port pandangan. Contohnya:

<svg viewBox="0 0 100 100">
  <text font-size="1">...</text>
</svg>

Dalam SVG ini, saiz fon 1 akan bersamaan dengan seperseratus saiz elemen SVG.

Had Pengiraan CSS

Adalah penting untuk ambil perhatian bahawa pengiraan CSS tidak boleh digunakan untuk menetapkan saiz fon sebagai peratusan saiz bekas. Sekatan ini berpunca daripada fakta bahawa peratusan dalam pengiraan saiz fon ditafsirkan secara relatif kepada saiz fon yang diwarisi, bukan dimensi bekas. Walaupun unit seperti bw (lebar kotak) akan memudahkan kefungsian sedemikian, ia masih belum dicadangkan dalam CSS.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengekalkan Saiz Fon Malar Berbanding Dimensi Bekas Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!