Bagaimana untuk Melaraskan Saiz Fon Secara Dinamik Berdasarkan Resolusi Skrin?

Saiz Fon Berkaitan dengan Resolusi Skrin Pengguna

Menentukan saiz fon yang sesuai untuk elemen pada tapak web cair boleh menjadi mencabar, terutamanya apabila mempertimbangkan untuk mengubah resolusi skrin. Matlamatnya adalah untuk memastikan saiz fon menu dilaraskan secara dinamik agar sesuai dengan lebar bekasnya tanpa membalut.

Dimensi Berasaskan Port Pandangan

CSS moden menawarkan dimensi relatif berdasarkan pada port pandangan peranti. Dimensi ini membenarkan saiz fon yang tepat berhubung dengan peleraian skrin pengguna:

• vw: Peratusan lebar port pandangan
• vh: Peratusan ketinggian port pandangan
• vmin: Nilai vw atau vh yang lebih kecil
• vmax: Nilai vw atau vh yang lebih besar

Contohnya:

<code class="css">body {
    font-size: 3.2vw;
}</code>

Ini akan menetapkan saiz fon kepada 3.2% daripada lebar port pandangan, memastikan ia berskala sesuai untuk resolusi skrin yang berbeza.

Kaedah Tradisional

Pendekatan lama termasuk:

Pertanyaan Media

• Memerlukan menentukan saiz fon untuk berbilang titik putus:

<code class="css">@media (min-width: 768px) {
    body {
        font-size: 17px;
    }
}</code>

Peratusan (%) atau "Root Ems" (rem)

• Tukar saiz fon asas (mis., badan) untuk menskalakan semua elemen:

<code class="css">body {
    font-size: 62.5%;
}

h1 {
    font-size: 1.5rem;
}</code>

• Rems adalah relatif kepada saiz fon akar, manakala peratusan adalah relatif kepada saiz elemen semasa.

Atas ialah kandungan terperinci Bagaimana untuk Melaraskan Saiz Fon Secara Dinamik Berdasarkan Resolusi Skrin?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!