Bagaimana untuk Mencapai Saiz Font Responsif untuk Susun Atur Bendalir?

Saiz Fon Responsif untuk Reka Letak Bendalir

Dalam tapak web mudah alih yang kandungan menyesuaikan diri dengan resolusi skrin yang berbeza-beza, adalah penting untuk memastikan teks kekal sesuai bersaiz untuk muat dalam bekas yang ditetapkan. Cabaran timbul dalam mencari unit yang mengekalkan penskalaan yang betul berbanding dengan saiz skrin.

Em: Terikat pada Fon Penyemak Imbas

Pada mulanya, menggunakan "em" sebagai fon unit kelihatan masuk akal. Walau bagaimanapun, ia adalah relatif kepada saiz fon lalai penyemak imbas, yang berbeza mengikut resolusi. Oleh itu, saiz fon kekal tidak berubah apabila resolusi berubah.

Unit Relatif Viewport: Penyelesaian

CSS memperkenalkan unit relatif viewport yang menyesuaikan diri dengan saiz port pandangan, menyediakan cara yang muktamad untuk menskalakan teks berbanding peleraian skrin:

• vw: Peratusan lebar port pandangan (cth., 3.2vw = 3.2% daripada lebar port pandangan)
• vh : Peratusan ketinggian port pandangan (cth., 3.2vh = 3.2% ketinggian port pandangan)
• vmin: Saiz berbanding nilai terkecil vw atau vh (cth., 3.2vmin = Lebih kecil daripada 3.2vw atau 3.2vh)
• vmax: Saiz berbanding dengan nilai terbesar vw atau vh (cth., 3.2vmax = Lebih besar daripada 3.2vw atau 3.2vh)

Contoh:

body {
    font-size: 3.2vw;
}

Pendekatan Warisan

Sebagai alternatif, pertimbangkan teknik warisan berikut:

• Pertanyaan Media: Tentukan fon berbeza saiz untuk titik putus tertentu (cth., ambang lebar skrin), tetapi ini memerlukan saiz tetapan untuk berbilang titik putus.
• Peratus (%) atau Rem (rem): Tentukan saiz menggunakan peratusan atau rem. Saiz fon asas mempengaruhi semua saiz lain. Dengan menetapkan saiz fon badan dan mentakrifkan yang lain dalam em atau %, teks kekal berskala.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Saiz Font Responsif untuk Susun Atur Bendalir?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!