Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimanakah saya boleh menskalakan saiz teks secara dinamik berdasarkan lebar penyemak imbas menggunakan JavaScript?

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

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-10-30 06:08:28991semak imbas

How can I dynamically scale text size based on browser width using 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!

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