Cara menggunakan unit CSS Viewport vh dan vmax untuk melaksanakan susun atur grid penyesuaian

Cara menggunakan unit CSS Viewport vh dan vmax untuk melaksanakan susun atur grid adaptif

Dalam reka bentuk web moden, reka letak penyesuaian adalah bahagian yang penting. Ia membolehkan halaman web mempunyai kebolehbacaan yang baik dan pengalaman pengguna pada saiz skrin dan peranti yang berbeza. Unit CSS Viewport ialah alat yang berkuasa untuk melaksanakan reka letak penyesuaian. Antaranya, vh dan vmax ialah dua unit viewport yang biasa digunakan, yang boleh membantu kami melaksanakan susun atur grid adaptif dalam reka bentuk web.

vh ialah unit peratusan ketinggian port pandangan, 1vh bersamaan dengan seperseratus ketinggian port pandangan. vmax ialah unit peratusan yang lebih besar daripada lebar dan ketinggian port pandangan, dan 1vmax adalah sama dengan seperseratus daripada lebar dan ketinggian port pandangan yang lebih besar. Kedua-dua unit adalah sangat fleksibel dan sangat boleh disesuaikan dalam susun atur penyesuaian.

Di bawah, kami akan meneroka cara menggunakan unit vh dan vmax untuk mencipta susun atur grid penyesuaian.

Pertama, kita perlu menyediakan bekas grid asas. Dalam HTML, kita boleh menggunakan elemen div sebagai bekas dan menetapkan nama kelas untuknya, seperti "grid-container". Kemudian, dalam CSS, kita boleh menambah gaya pada nama kelas ini untuk mencipta reka letak grid.

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}

.grid-item {
  background-color: #eee;
}

Dalam kod di atas, kami menggunakan Grid CSS (susun atur grid) untuk mencipta bekas grid dengan tiga lajur, dengan elemen anak ialah elemen div dengan nama kelas ".grid-item".

Seterusnya, kami akan menjadikan susun atur grid ini adaptif menggunakan unit vh dan vmax.

Mula-mula, mari tetapkan ketinggian bekas grid. Kita boleh menggunakan unit vh untuk menentukan bahawa ketinggian bekas ialah peratusan ketinggian viewport.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  height: 70vh;
}

Dalam kod di atas, kami menetapkan ketinggian bekas kepada 70% daripada ketinggian viewport. Dengan cara ini, ketinggian bekas akan dilaraskan secara automatik pada saiz skrin yang berbeza.

Seterusnya, kita boleh menjadikan setiap sel susun atur grid sangat adaptif dengan menetapkan ketinggian elemen kanak-kanak.

.grid-item {
  background-color: #eee;
  height: 100%;
}

Dalam kod di atas, kami menetapkan ketinggian elemen kanak-kanak kepada 100%, supaya ketinggian setiap sel akan melaraskan secara automatik mengikut ketinggian bekas.

Selain itu, kami boleh menggunakan unit vmax untuk menjadikan susun atur grid boleh dibaca pada skrin dengan nisbah aspek yang berbeza. Sebagai contoh, jika kita mahu lebar setiap sel susun atur grid sama dengan nilai ketinggian bekas yang lebih besar, kita boleh menetapkannya seperti ini:

.grid-item {
  background-color: #eee;
  height: 100%;
  width: 100vmax;
}

Dalam kod di atas, kita tetapkan lebar elemen kanak-kanak kepada 100vmaks, supaya setiap Lebar setiap sel akan dilaraskan secara automatik mengikut lebih besar lebar port pandangan dan ketinggian port pandangan.

Dengan menggunakan unit vh dan vmax, kami boleh melaksanakan susun atur grid penyesuaian dengan mudah. Ini sangat membantu dalam mencipta reka bentuk web dengan kebolehbacaan yang baik dan pengalaman pengguna. Saya harap kod sampel dalam artikel ini boleh memberi inspirasi kepada anda untuk menggunakan unit Viewport untuk melaksanakan reka letak grid penyesuaian dalam reka bentuk web.

Atas ialah kandungan terperinci Cara menggunakan unit CSS Viewport vh dan vmax untuk melaksanakan susun atur grid penyesuaian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!