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 < minScale) fontSize = minScale;

    $body.css('font-size', fontSize + '%');
  }

  $(window).resize(function() {
    setBodyScale();
  });

  // Fire it when the page first loads:
  setBodyScale();
});</code>

Penjelasan:

• Kod ini menggunakan jQuery untuk menetapkan saiz fon elemen badan berdasarkan lebar tetingkap.
• Fungsi setBodyScale mengira faktor penskalaan (scaleFactor) berdasarkan perkadaran saiz teks yang diingini (scaleSource * scaleFactor).
• Ia menguatkuasakan had skala minimum dan maksimum untuk mengelakkan saiz teks yang berlebihan .
• Saiz fon ditetapkan sebagai peratusan elemen badan, yang menskalakan semua teks di dalamnya yang ditakrifkan menggunakan unit em.
• Pengendali acara JavaScript memastikan pelarasan saiz teks berlaku pada kedua-dua saiz semula tetingkap dan pemuatan halaman.

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!