Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Mengekalkan Saiz Fon Malar Berbanding Dimensi Bekas Dinamik?

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

Mary-Kate Olsen
Lepaskan: 2024-12-13 13:09:10
asal
862 orang telah melayarinya

How Can I Maintain a Constant Font Size Relative to a Dynamic Container's Dimensions?

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;
}
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan