Bagaimana untuk Mencapai Saiz Semula Teks Dinamik untuk Kebolehbacaan Optimum dalam Reka Bentuk Web Responsif?

Saiz Semula Teks Dinamik untuk Reka Bentuk Web Responsif

Satu cabaran biasa dalam reka bentuk web ialah memastikan teks kekal mudah dibaca dan menarik secara visual merentas saiz skrin yang berbeza . Ini amat relevan untuk reka letak bendalir yang menyesuaikan diri dengan peleraian peranti pengguna.

Soalan: Bagaimanakah saya boleh melaraskan saiz fon elemen teks secara automatik apabila pengguna mengubah saiz tetingkap penyemak imbas?

Jawapan: Menggunakan kedua-dua CSS dan JavaScript, anda boleh melaksanakan saiz semula teks dinamik untuk mengekalkan kebolehbacaan yang optimum.

CSS:

Untuk elemen yang tidak memerlukan saiz fon yang tepat (cth., tajuk, perenggan), anda boleh menentukan saiz fon sebagai peratusan berbanding saiz fon badan. Ini membolehkan saiz fon yang lebih kecil atau lebih besar dikira secara automatik berdasarkan saiz fon badan. Contohnya:

<code class="css">body {
  font-size: 16px;
}

h1 {
  font-size: 150%;
}

p {
  font-size: 120%;
}</code>

JavaScript:

Untuk mengemas kini saiz fon badan secara dinamik berdasarkan ketinggian tetingkap, anda boleh menggunakan JavaScript. Skrip berikut mengira peratusan berdasarkan ketinggian tetingkap semasa berbanding ketinggian pilihan dan melaraskan saiz fon badan dengan sewajarnya:

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

function resizeMe()
{
    // Standard height for optimal body font size
    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>

Pelaksanaan:

1. Tetapkan saiz fon asas dalam CSS badan (cth., 16px).
2. Nyatakan saiz fon untuk elemen lain sebagai peratusan berbanding saiz fon badan.
3. Sertakan kod JavaScript dalam web anda halaman.

Pendekatan ini membenarkan saiz semula teks yang lancar yang disesuaikan dengan pelbagai dimensi tetingkap, memastikan teks kekal jelas dan boleh dibaca pada semua peranti.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Saiz Semula Teks Dinamik untuk Kebolehbacaan Optimum dalam Reka Bentuk Web Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!