Cara menggunakan unit CSS Viewport untuk melaraskan saiz fon berdasarkan saiz skrin

Cara menggunakan unit CSS Viewport untuk melaraskan saiz fon mengikut saiz skrin

Unit CSS Viewport ialah unit berbanding dengan saiz viewport, yang boleh membantu kami melaraskan saiz fon mengikut saiz skrin secara dinamik. Dalam era peranti mudah alih, teknologi ini boleh membantu kita menyelesaikan masalah fon terlalu besar atau terlalu kecil yang disebabkan oleh saiz skrin yang pelbagai. Artikel ini menerangkan cara menggunakan unit CSS Viewport untuk melaraskan saiz fon berdasarkan saiz skrin dan menyediakan beberapa contoh kod khusus.

1. Gunakan unit VW

Unit Lebar Pelabuhan Pandangan (Unit Lebar Pelabuhan Pandang, dirujuk sebagai VW) ialah unit relatif kepada lebar petak pandang. Penggunaan asas adalah seperti berikut:

h1{
  font-size: 4vw;
}

Dalam kod di atas, saiz fon teg h1 akan dilaraskan apabila lebar viewport berubah, mengekalkan hubungan berkadar dengan lebar viewport.

2. Gunakan unit VH

Unit Viewport Height (unit Viewport Height, dirujuk sebagai VH) ialah unit relatif kepada ketinggian viewport. Penggunaan asas adalah seperti berikut:

p{
  font-size: 3vh;
}

Dalam kod di atas, saiz fon label p akan dilaraskan apabila ketinggian port pandangan berubah, mengekalkan hubungan berkadar dengan ketinggian port pandangan.

3. Gunakan unit Vmin dan Vmax

Unit Minimum Viewport (pendek kata Vmin) ialah unit berbanding dengan nilai lebar dan ketinggian viewport yang lebih kecil, unit Viewport Maximum , dirujuk sebagai Vmax) adalah relatif kepada nilai yang lebih besar bagi lebar dan tinggi port pandang. Penggunaan asas adalah seperti berikut:

h2{
  font-size: 2vmin;
}
h3{
  font-size: 2vmax;
}

Dalam kod di atas, saiz fon teg h2 akan dilaraskan dengan nilai yang lebih kecil bagi lebar dan ketinggian port pandangan, dan saiz fon teg h3 akan dilaraskan dengan yang lebih kecil. daripada lebar dan ketinggian port pandangan Laraskan untuk perubahan nilai yang besar.

4. Digabungkan dengan pertanyaan media

Untuk mendapatkan hasil yang lebih baik pada skrin dengan saiz yang berbeza, kami boleh menggabungkan pertanyaan media untuk mencapai pelarasan saiz fon yang lebih halus. Contohnya, jika anda ingin menggunakan saiz fon yang berbeza di bawah lebar skrin yang berbeza, anda boleh menggunakan kod berikut:

h4{
  font-size: 20px;
}

@media screen and (max-width: 600px){
  h4{
    font-size: 15px;
  }
}

Dalam kod di atas, saiz fon teg h4 akan dilaraskan kepada 15px apabila lebar skrin kurang daripada 600px, jika tidak, ia akan kekal pada 20px .

Adalah mudah untuk melaraskan saiz fon berdasarkan saiz skrin dengan menggunakan unit CSS Viewport dan pertanyaan media. Halaman web bukan sahaja boleh dipaparkan dengan lebih cantik dan selesa pada skrin dengan saiz yang berbeza, tetapi ia juga boleh meningkatkan pengalaman pengguna.

Dengan contoh kod di atas, kami boleh menyesuaikan saiz fon dengan mudah untuk disesuaikan dengan peranti dan saiz skrin yang berbeza. Pendekatan reka bentuk responsif ini memastikan bahawa halaman web kami boleh dibaca secara optimum dan boleh dilihat pada pelbagai peranti. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Cara menggunakan unit CSS Viewport untuk melaraskan saiz fon berdasarkan saiz skrin. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!