Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Skalakan Saiz Fon Secara Berkadaran dengan Saiz Bekasnya dalam CSS?

Bagaimanakah Saya Boleh Skalakan Saiz Fon Secara Berkadaran dengan Saiz Bekasnya dalam CSS?

Susan Sarandon
Susan Sarandonasal
2024-12-28 07:32:30768semak imbas

How Can I Scale Font Size Proportionally to its Container Size in CSS?

Menskalakan Saiz Fon dengan Saiz Bekas dalam CSS

CSS menawarkan kaedah untuk melaraskan saiz fon secara berkadar berdasarkan saiz bekasnya, walaupun terdapat batasan penskalaan fon menggunakan peratusan.

Untuk mencapai ini, gunakan unit lebar port pandangan (vw):

#mydiv { font-size: 5vw; }

Dengan persediaan ini, fon dalam bekas, dilambangkan dengan #mydiv, akan sentiasa berskala sebagai peratusan lebar port pandangan.

Sebagai alternatif, menggunakan SVG terbenam dalam HTML menyediakan penyelesaian lain. Dalam pendekatan ini, atribut saiz fon bagi elemen teks ditafsirkan sebagai "unit pengguna" berhubung dengan dimensi ruang pandang. Contohnya, saiz fon 1 dalam port pandang yang ditakrifkan sebagai 0 0 100 100 mewakili satu perseratus saiz elemen SVG.

Perlu ambil perhatian bahawa pengiraan dalam peratusan CSS sentiasa relatif kepada fon yang diwarisi. saiz, bukan saiz bekas. Oleh itu, CSS tidak mempunyai unit yang ditetapkan untuk menskalakan saiz fon berdasarkan lebar bekas, seperti "bw" (lebar kotak).

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Skalakan Saiz Fon Secara Berkadaran dengan Saiz Bekasnya dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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