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

Mencapai Saiz Fon Responsif dengan CSS

Dalam CSS, mengawal saiz fon secara responsif adalah penting untuk mencipta tapak web yang mesra pengguna. Ini amat penting untuk reka bentuk responsif yang menyesuaikan diri dengan saiz skrin yang berbeza-beza.

Pertimbangkan tapak web menggunakan grid Zurb Foundation 3, di mana teks pengepala h1 yang besar melimpah secara mendatar apabila penyemak imbas diubah saiz kepada saiz yang lebih kecil. Isu ini boleh diatasi dengan memasukkan unit viewport ke dalam pengisytiharan saiz fon.

Melaksanakan Viewport Unit

Unit viewport membantu menentukan saiz fon berdasarkan dimensi viewport. Unit berikut boleh digunakan:

• 1vw: 1% daripada lebar viewport
• 1vh: 1% daripada ketinggian viewport
• 1vmin: Minimum 1vw dan 1vh
• 1vmax: Maksimum 1vw dan 1vh

Contoh Code

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

Dengan menggunakan viewport unit, saiz fon secara automatik melaraskan kepada dimensi viewport, memastikan kebolehbacaan optimum dan kebolehaksesan merentas saiz skrin yang berbeza. Teknik ini amat berguna untuk tapak web responsif 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!