Bagaimanakah Saya Boleh Skalakan Saiz Teks Secara Dinamik Berdasarkan Lebar Penyemak Imbas?

Skala Dinamik Saiz Teks Berdasarkan Lebar Pelayar

Soalan:

Adakah ada teknik untuk melaraskan saiz teks secara automatik untuk mengekalkan perkadaran yang diingini bagi lebar tetingkap penyemak imbas, sambil turut menskalakan saiz teks menegak dengan sewajarnya?

Jawapan:

Ya , begini caranya:

Untuk mencapai penskalaan teks dinamik, anda boleh menggunakan JavaScript untuk memanipulasi saiz fon badan berdasarkan lebar tetingkap. Kod JavaScript berikut menunjukkan pendekatan ini:

<code class="javascript">$(document).ready(function() {
  var $body = $('body');

  var setBodyScale = function() {
    var scaleSource = $body.width(),
      scaleFactor = 0.35,
      maxScale = 600,
      minScale = 30;

    var fontSize = scaleSource * scaleFactor;

    if (fontSize > maxScale) fontSize = maxScale;
    if (fontSize <p><strong>Penjelasan:</strong></p>
<ul>
<li>Kod ini menggunakan jQuery untuk menetapkan saiz fon elemen badan berdasarkan lebar tetingkap.</li>
<li>Fungsi setBodyScale mengira faktor penskalaan (scaleFactor) berdasarkan perkadaran saiz teks yang diingini (scaleSource * scaleFactor).</li>
<li>Ia menguatkuasakan had skala minimum dan maksimum untuk mengelakkan saiz teks yang berlebihan .</li>
<li>Saiz fon ditetapkan sebagai peratusan elemen badan, yang menskalakan semua teks di dalamnya yang ditakrifkan menggunakan unit em.</li>
<li>Pengendali acara JavaScript memastikan pelarasan saiz teks berlaku pada kedua-dua saiz semula tetingkap dan pemuatan halaman.</li>
</ul></code>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Skalakan Saiz Teks Secara Dinamik Berdasarkan Lebar Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!