Bagaimanakah Unit Viewport Boleh Menyelesaikan Isu Saiz Font Responsif dalam CSS?

Saiz Font Responsif dalam CSS: Penyelesaian Menggunakan Unit Viewport

Semasa bekerja dengan grid Zurb Foundation 3, anda menghadapi masalah di mana h1 teks pengepala kekal tetap dan menyebabkan penatalan mendatar pada peranti mudah alih. Masalah ini wujud kerana saiz fon ditetapkan menggunakan unit tetap seperti ems atau piksel.

Untuk mencapai saiz fon responsif, pertimbangkan untuk menggunakan unit port pandangan. Unit viewport adalah relatif kepada lebar atau tinggi viewport, memastikan teks berskala secara berkadar semasa penyemak imbas mengubah saiz.

Penyelesaian:

Laksanakan unit viewport untuk saiz fon seperti berikut:

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

Di sini, saiz fon ditetapkan menggunakan:

• vw (lebar viewport) untuk h1 untuk mengekalkan responsif mendatar
• vh (tinggi viewport) untuk h2 untuk melaraskan secara menegak
• vmin (yang lebih kecil daripada vw dan vh) untuk p bagi memastikan kebolehbacaan merentas pelbagai saiz port pandangan

Pendekatan ini akan menghasilkan teks yang menyesuaikan secara dinamik dengan lebar dan ketinggian penyemak imbas, memberikan pengalaman pengguna yang optimum pada kedua-dua desktop dan peranti mudah alih.

Atas ialah kandungan terperinci Bagaimanakah Unit Viewport Boleh Menyelesaikan Isu Saiz Font Responsif dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!