Gunakan unit CSS Viewport vmin dan vmax untuk melaksanakan pensaiz semula dinamik elemen

Gunakan unit CSS Viewport vmin dan vmax untuk melaksanakan kaedah melaraskan saiz elemen secara dinamik

Dengan populariti peranti mudah alih dan kemunculan terminal dalam pelbagai saiz, reka bentuk responsif halaman web telah menjadi semakin banyak. penting. Untuk mengekalkan saiz relatif elemen merentas saiz skrin yang berbeza, kami boleh menggunakan unit CSS Viewport vmin dan vmax. Artikel ini akan menerangkan cara menggunakan kedua-dua unit ini untuk melaksanakan pensaiz semula dinamik elemen dan menyediakan beberapa contoh kod untuk rujukan.

1. Pengenalan kepada unit vmin dan vmax
   Sebelum memperkenalkan kaedah penggunaan khusus, mari kita perkenalkan secara ringkas unit vmin dan vmax.

vmin dikira secara relatif kepada nilai yang lebih kecil bagi lebar dan ketinggian port pandangan, dan nilainya ialah peratusan nilai yang lebih kecil bagi lebar dan ketinggian port pandangan. Sebagai contoh, jika lebar port pandangan ialah 800px dan ketinggian ialah 1000px, maka 1vmin adalah sama dengan 8px (1% daripada 800px).
vmax dikira secara relatif kepada nilai lebar dan tinggi port pandangan yang lebih besar, dan nilainya ialah peratusan nilai lebar dan ketinggian port pandangan yang lebih besar. Contohnya, jika lebar port pandangan ialah 800px dan ketinggian ialah 1000px, maka 1vmax adalah sama dengan 10px (1% daripada 1000px).

Dengan menggunakan unit vmin dan vmax, kami boleh mengubah saiz elemen secara dinamik berdasarkan lebar dan ketinggian port pandangan untuk memastikan ia berkadar merentas saiz skrin yang berbeza.

2. Cara mengubah saiz elemen menggunakan vmin dan vmax
   Berikut ialah beberapa contoh kod sebenar menggunakan vmin dan vmax untuk mengubah saiz elemen:

.container {
  width: 50vmin;
  height: 50vmax;
  background-color: #f0f0f0;
}

.box {
  width: 20vmin;
  height: 20vmin;
  background-color: #ff0000;
  margin: 2vmin;
}

Dalam kod di atas, kami mentakrifkan bekas (.container) dan elemen anak (. kotak). Lebar dan tinggi bekas adalah 50% daripada lebar dan tinggi port pandangan yang lebih kecil, atau separuh daripada lebar skrin. Lebar dan ketinggian elemen kanak-kanak ialah 20% daripada lebar dan tinggi port pandangan yang lebih kecil, atau 1/5 daripada lebar dan ketinggian skrin.

Dengan menggunakan unit vmin dan vmax untuk lebar dan ketinggian elemen, anda boleh memastikan elemen mengekalkan saiz relatifnya merentas saiz skrin yang berbeza. Apabila lebar dan ketinggian port pandangan berubah, saiz elemen akan dilaraskan dengan sewajarnya.

3. Menguji dan Menyesuaikan
   Untuk memastikan saiz elemen menyesuaikan diri dengan saiz skrin yang berbeza, kami harus melakukan ujian dan kerja penyesuaian yang betul. Anda boleh menggunakan alatan pembangun penyemak imbas anda untuk mensimulasikan saiz port pandangan yang berbeza dan melihat cara elemen muncul pada skrin yang berbeza.

Apabila menyesuaikan diri, anda perlu mengambil kira perbezaan dalam saiz port pandangan peranti berbeza dan kemungkinan isu keserasian penyemak imbas. Anda boleh menggunakan pertanyaan media CSS dan sifat media untuk menggunakan gaya berbeza berdasarkan saiz skrin yang berbeza.

@media (max-width: 768px) {
  .container {
    width: 80vmin;
    height: 80vmax;
  }

  .box {
    width: 30vmin;
    height: 30vmin;
    margin: 5vmin
  }
}

Dalam coretan kod di atas, kami menggunakan pertanyaan media untuk menyesuaikan diri dengan peranti skrin kecil (lebar maksimum ialah 768px). Dalam kes ini, lebar dan tinggi bekas diubah saiz kepada 80% daripada lebar dan tinggi port pandangan yang lebih kecil, dan lebar dan tinggi kanak-kanak diubah saiznya kepada 30% daripada lebar dan ketinggian port pandangan yang lebih kecil, dengan beberapa sisi tambahan. jarak.

Melalui ujian dan penyesuaian, anda boleh memastikan elemen kekal bersaiz sesuai pada saiz skrin yang berbeza dan memberikan pengalaman pengguna yang lebih baik.

Ringkasan
Menggunakan unit CSS Viewport vmin dan vmax dengan berkesan boleh mencapai kesan mengubah saiz elemen secara dinamik untuk menyesuaikan diri dengan saiz skrin yang berbeza. Dengan menetapkan lebar dan ketinggian elemen sebagai peratusan berbanding lebar dan tinggi port pandangan, anda boleh memastikan bahawa elemen mengekalkan saiz relatifnya merentas skrin yang berbeza.

Apabila menyesuaikan diri, kerja ujian dan penyesuaian yang betul perlu dijalankan, dan isu keserasian peranti dan penyemak imbas yang berbeza perlu diambil kira. Gunakan pertanyaan media CSS dan sifat media untuk menggunakan gaya berbeza berdasarkan saiz skrin yang berbeza.

Di atas adalah pengenalan kepada kaedah melaraskan saiz elemen secara dinamik menggunakan unit CSS Viewport vmin dan vmax dan beberapa contoh kod sebenar. Harap ini membantu!

Atas ialah kandungan terperinci Gunakan unit CSS Viewport vmin dan vmax untuk melaksanakan pensaiz semula dinamik elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!