Bagaimanakah Anda Boleh Mencapai Saiz Semula Teks Dinamik sebagai Respons kepada Pelarasan Tetingkap Menggunakan CSS dan JavaScript?

Saiz Semula Teks Dinamik semasa Mengubah Saiz Tetingkap: Penyelesaian CSS dan JavaScript

Apabila berhadapan dengan cabaran untuk membuat saiz semula teks halaman web dengan lancar dengan mengubah saiz tetingkap, seseorang mungkin pada mulanya mempertimbangkan CSS. Walaupun berkesan untuk imej, CSS sahaja mungkin tidak mencukupi untuk teks.

Untuk menangani isu ini, gabungan CSS dan JavaScript menawarkan penyelesaian yang mantap. Dengan menetapkan saiz fon asas dalam CSS dan peratusan untuk saiz lain, kami boleh memastikan semua saiz elemen melaraskan secara berkadar.

Seterusnya, kami menggunakan skrip jQuery untuk memantau saiz semula tetingkap. Selepas pengesanan, skrip melaraskan semula saiz fon asas, dan saiz elemen lain mengikutnya.

Berikut ialah contoh skrip jQuery yang mencapai ini:

$(function() {
    $(window).bind('resize', function() {
        resizeMe();
    }).trigger('resize');
});

Dan dalam fungsi 'resizeMe' , kami menggunakan kod berikut:

var preferredHeight = 768; // Standard height for correct body font size
var fontsize = 18; // Base font size

var displayHeight = $(window).height();
var percentage = displayHeight / preferredHeight;
var newFontSize = Math.floor(fontsize * percentage) - 1;
$("body").css("font-size", newFontSize);

Skrip ini melaraskan saiz fon elemen 'badan' berdasarkan ketinggian tetingkap, memastikan pengalaman penskalaan yang dinamik dan mesra pengguna tanpa memerlukan zum halaman manual.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Mencapai Saiz Semula Teks Dinamik sebagai Respons kepada Pelarasan Tetingkap Menggunakan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!