Cara Menskalakan Saiz Elemen Teks Secara Dinamik pada Ubah Saiz Tetingkap

Menskalakan Teks dengan Saiz Semula Tetingkap

Dalam dunia reka bentuk web, responsif selalunya melangkaui imej. Apabila pengguna mengubah saiz tetingkap penyemak imbas mereka, adalah wajar bukan sahaja imej tetapi juga elemen teks melaraskan saiznya dengan sewajarnya.

Satu pendekatan biasa untuk cabaran ini adalah melalui CSS. Imej boleh ditetapkan dengan mudah untuk mengekalkan nisbah bidang dan skalanya dengan tetingkap menggunakan teknik seperti saiz latar belakang: mengandungi. Walau bagaimanapun, mereplikasi fungsi ini untuk teks boleh terbukti lebih sukar difahami.

Untuk mencapai penskalaan dinamik teks, pertimbangkan untuk melaksanakan penyelesaian JavaScript menggunakan jQuery. Dengan menetapkan saiz fon asas untuk elemen badan dan menyatakan semua saiz fon lain sebagai peratusan asas, anda boleh melaraskan saiz fon asas secara dinamik pada saiz semula tetingkap. Kesan riak ini secara automatik akan mengemas kini semua saiz teks pada halaman.

Berikut ialah contoh skrip jQuery yang mencapai ini:

<code class="javascript">$(function() {
    $(window).bind('resize', function() {
        resizeMe();
    }).trigger('resize');
});

function resizeMe() {
    //Standard height, for which the body font size is correct
    var preferredHeight = 768;
    //Base font size for the page
    var fontsize = 18;

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

Dengan skrip ini disediakan, elemen teks halaman web anda akan lancar laraskan saiz mereka semasa pengguna mengubah saiz tetingkap penyemak imbas mereka.

Atas ialah kandungan terperinci Cara Menskalakan Saiz Elemen Teks Secara Dinamik pada Ubah Saiz Tetingkap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!