Bagaimanakah saya boleh menskalakan saiz teks secara dinamik berdasarkan lebar penyemak imbas menggunakan JavaScript?

Penskalaan Saiz Teks Dinamik Berdasarkan Lebar Penyemak Imbas

Masalah:

Dalam konteks projek, saiz teks kekal statik dan perlu dilaraskan secara dinamik kepada kira-kira 90% daripada lebar tetingkap penyemak imbas, dengan penskalaan yang sepadan bagi saiz teks menegak.

Jawapan:

Menskalakan Saiz Fon Badan Menggunakan JavaScript:

Laksanakan fungsi JavaScript yang menetapkan saiz fon badan berdasarkan lebar tetingkap penyemak imbas.

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

Skrip ini melaraskan saiz fon keseluruhan elemen badan berdasarkan lebar tetingkap penyemak imbas. Faktor penskalaan dan nilai saiz fon minimum dan maksimum boleh disesuaikan mengikut kehendak.

Keputusan:

Kaedah ini memastikan elemen teks, ditetapkan dalam unit em, berskala dinamik kepada kira-kira 90% daripada lebar penyemak imbas dan laraskan saiz menegaknya dengan sewajarnya.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menskalakan saiz teks secara dinamik berdasarkan lebar penyemak imbas menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!