CSS Viewport: Cara menggunakan unit vh, vw, vmin dan vmax untuk reka bentuk responsif

CSS Viewport: Cara menggunakan unit vh, vw, vmin dan vmax untuk mencapai reka bentuk responsif, contoh kod khusus diperlukan

Dalam reka bentuk web responsif moden, kami biasanya mahu halaman web menyesuaikan dengan saiz skrin dan peranti yang berbeza untuk Berikan pengalaman pengguna yang baik. Unit CSS Viewport (unit viewport) ialah salah satu alatan penting untuk membantu kami mencapai matlamat ini. Dalam artikel ini, kami akan membincangkan cara menggunakan unit vh, vw, vmin dan vmax untuk melaksanakan reka bentuk responsif dan menyediakan contoh kod khusus.

Mula-mula, mari kita lihat unit port pandangan baharu ini:

1. vh (ketinggian port pandangan): Mewakili unit peratusan berbanding ketinggian port pandangan. Sebagai contoh, 1vh adalah bersamaan dengan 1% daripada ketinggian viewport.
2. vw (lebar viewport): mewakili unit peratusan berbanding lebar viewport. Sebagai contoh, 1vw adalah bersamaan dengan 1% daripada lebar viewport.
3. vmin (minimum port pandangan): Mewakili unit peratusan berbanding dengan lebar dan ketinggian port pandangan yang lebih kecil. Sebagai contoh, 1vmin adalah bersamaan dengan 1% daripada lebar port pandangan yang lebih kecil atau ketinggian port pandangan.
4. vmax (maksimum port pandangan): mewakili unit peratusan berbanding dengan lebar dan ketinggian port pandangan yang lebih besar. Sebagai contoh, 1vmax adalah sama dengan 1% daripada lebar port pandangan atau ketinggian port pandangan yang lebih besar.

Seterusnya, kami akan menggunakan contoh mudah untuk menggambarkan cara menggunakan unit ini untuk melaksanakan reka bentuk responsif.

Katakan kita mempunyai reka letak halaman web yang mengandungi bar navigasi atas dan kawasan kandungan. Kami mahu ketinggian bar navigasi sentiasa 30px dan ketinggian kawasan kandungan disesuaikan untuk mengisi ruang yang tinggal.

Pertama, kita perlu menetapkan gaya bar navigasi:

.navbar {
  height: 30px;
}

Seterusnya, kita boleh menggunakan unit vh untuk menetapkan ketinggian kawasan kandungan. Katakan kita mahu ketinggian kawasan kandungan untuk menduduki 80% daripada ketinggian port pandangan:

.content {
  height: 80vh;
}

Dengan cara ini, tanpa mengira ketinggian sebenar port pandangan, kawasan kandungan akan diisi kepada ketinggian 80%.

Selain menetapkan ketinggian, kita juga boleh menggunakan unit vw untuk menetapkan lebar. Katakan kita mahu lebar kawasan kandungan untuk menduduki 50% daripada lebar viewport:

.content {
  width: 50vw;
}

Begitu juga, kita boleh menggunakan unit vmin dan vmax untuk menetapkan nilai yang lebih kecil dan lebih besar dari ketinggian viewport dan lebar viewport. Sebagai contoh, jika kita mahu lebar dan tinggi sesuatu elemen sentiasa sama, kita boleh menggunakan unit vmin:

.square {
  width: 50vmin;
  height: 50vmin;
}

Dengan cara ini, lebar dan tinggi elemen akan kekal sama tanpa mengira lebar dan ketinggian sebenar tempat pandang.

Akhir sekali, jika kita mahu lebar atau tinggi sesuatu elemen sentiasa relatif kepada maksimum saiz viewport, kita boleh menggunakan unit vmax. Sebagai contoh, jika kita mahu lebar dan tinggi butang sentiasa tidak melebihi 30% daripada saiz viewport:

.button {
  width: 30vmax;
  height: 30vmax;
}

Dengan cara ini, tidak kira apa lebar dan ketinggian sebenar viewport, lebar dan tinggi daripada butang tidak akan melebihi saiz viewport.

Ringkasnya, menggunakan unit vh, vw, vmin dan vmax boleh membantu kami mencapai reka letak web yang lebih fleksibel dan responsif. Dengan menetapkan lebar dan ketinggian elemen, kami boleh melaraskan reka letak secara automatik berdasarkan saiz port pandangan untuk memberikan pengalaman pengguna yang terbaik.

Saya harap contoh kod dan pengenalan dalam artikel ini akan membantu anda memahami dan menggunakan unit CSS Viewport. Saya doakan anda berjaya dalam melaksanakan reka bentuk responsif!

Atas ialah kandungan terperinci CSS Viewport: Cara menggunakan unit vh, vw, vmin dan vmax untuk reka bentuk responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!