Bagaimana untuk Mengubah Saiz Fon Secara Dinamik Berdasarkan Saiz Div?

Ubah Saiz Font Mengikut Saiz Div

Dalam senario di mana div terdiri daripada sembilan kotak dengan teks terkandung dalam kotak tengah , adalah wajar untuk melaraskan saiz fon secara dinamik untuk mengekalkan nisbah yang konsisten dengan keseluruhan halaman dimensi.

Mengubah Saiz Teks Dalam Div

Untuk mencapai ini, masukkan sifat CSS3 berikut dalam tag:

body {
  font-size: calc(1.25vmin + 1.25vmax);
}

Keserasian Silang Resolusi

Daripada menggunakan berbilang pertanyaan media CSS untuk menampung resolusi yang berbeza, pertimbangkan untuk menggunakan gaya CSS3 berikut, yang melaraskan fon secara automatik saiz berdasarkan skrin lebar:

@media (min-width: 50px) { body { font-size: 0.1em; } }
@media (min-width: 100px) { body { font-size: 0.2em; } }
// ...and so on, with incrementing width thresholds...
@media (min-width: 1700px) { body { font-size: 3.6em; } }

Penjelasan

• Unit vmin mewakili peratusan min sama ada ketinggian atau lebar port pandangan.
• Vmax unit mewakili peratusan maksimum sama ada ketinggian atau lebar port pandangan.
• Dengan menggunakan ini formula, saiz fon akan berskala secara berkadar kepada ketinggian dan lebar port pandang yang lebih kecil, memastikan perkadaran teks yang konsisten merentas saiz skrin yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Saiz Fon Secara Dinamik Berdasarkan Saiz Div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!