Unit Pandangan CSS: CSS *vh (dvh, lvh, svh) dan *vw unit

Unit paparan CSS adalah penting untuk mencipta reka letak responsif yang menyesuaikan diri dengan saiz skrin yang berbeza. Unit ini mengukur dimensi berbanding ketinggian dan lebar port pandangan, membolehkan pembangun mereka bentuk antara muka web yang fleksibel dan boleh disesuaikan. Panduan ini akan merangkumi unit vh dan vw tradisional serta memperkenalkan unit yang lebih baharu seperti dvh, lvh dan svh, menerangkan cara ia meningkatkan responsif dan mengendalikan perubahan port pandangan dengan lebih berkesan.

1. Apakah Unit Viewport dalam CSS?

Unit viewport ialah unit relatif yang melaraskan secara dinamik kepada saiz viewport penyemak imbas. Yang paling biasa digunakan ialah:

• vh: 1% daripada ketinggian port pandangan.
• vw: 1% daripada lebar port pandangan.

Unit ini memudahkan mereka bentuk elemen yang berskala dengan saiz tetingkap penyemak imbas. Contohnya:

div {
  width: 50vw; /* 50% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  background-color: lightblue;
}

Dalam contoh ini, div menjangkau separuh lebar dan ketinggian penuh port pandangan.

2. Had vh dan vw Tradisional

Walaupun vh dan vw berfungsi dengan baik dalam kebanyakan senario, mereka tidak mengambil kira perubahan dinamik tertentu dalam port pandangan, seperti:

• Kemunculan bar alamat penyemak imbas atau kawalan navigasi pada peranti mudah alih.
• Perubahan yang dicetuskan oleh orientasi peranti atau mengubah saiz tetingkap penyemak imbas.

Penghadan ini boleh menyebabkan reka bentuk kelihatan tidak konsisten atau mengakibatkan isu reka letak yang tidak diingini, terutamanya pada mudah alih.

3. Unit Viewport Baharu: dvh, lvh dan svh

Untuk menangani isu ini, CSS memperkenalkan tiga unit baharu: dvh (Dynamic Viewport Height), lvh (Large Viewport Height) dan svh (Small Viewport Height).

Ketinggian Port Pandangan Dinamik (dvh)

dvh melaraskan secara dinamik kepada perubahan dalam port pandangan, seperti penampilan atau kehilangan elemen UI penyemak imbas. Ia mewakili 1% daripada ketinggian paparan semasa, memastikan reka letak anda menyesuaikan diri dalam masa nyata.

Contoh:

div {
  height: 100dvh; /* Adjusts dynamically to visible viewport height */
  background-color: lightgreen;
}

Ini memastikan div sentiasa sesuai dengan kawasan yang boleh dilihat, walaupun apabila UI penyemak imbas berubah.

Ketinggian Viewport Besar (lvh)

lvh mewakili 1% daripada ketinggian port pandangan terbesar yang mungkin, mengabaikan perubahan UI dinamik (seperti bar alamat mudah alih).

Contoh:

div {
  height: 100lvh; /* Fixed to the maximum viewport height */
  background-color: lightcoral;
}

Ini berguna untuk reka letak yang perlu mengekalkan konsistensi, tanpa mengira perubahan UI penyemak imbas.

Tinggi Viewport Kecil (svh)

svh mewakili 1% daripada ketinggian port pandangan terkecil yang mungkin, menampung senario di mana UI penyemak imbas menduduki sebahagian besar skrin.

Contoh:

div {
  width: 50vw; /* 50% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  background-color: lightblue;
}

Unit ini amat membantu apabila berurusan dengan peranti yang unsur UI seperti papan kekunci pop timbul boleh mengecilkan kawasan yang boleh dilihat.

4. Lebar Port Pandangan (vw)

vw mengukur 1% daripada lebar port pandangan. Ia kekal konsisten dan tidak terjejas oleh perubahan dinamik seperti penatalan atau penampilan UI.

Contoh:

div {
  height: 100dvh; /* Adjusts dynamically to visible viewport height */
  background-color: lightgreen;
}

Ini sesuai untuk reka letak mendatar atau reka bentuk lebar penuh.

5. Kes Penggunaan Praktikal

Begini cara unit ini boleh digunakan dalam senario dunia sebenar:

Bahagian Wira Responsif

div {
  height: 100lvh; /* Fixed to the maximum viewport height */
  background-color: lightcoral;
}

Ini memastikan bahagian wira sentiasa sesuai dengan skrin, walaupun apabila bar alamat mudah alih bersembunyi atau muncul.

Modal Halaman Penuh

div {
  height: 100svh; /* Adjusts to the smallest viewport height */
  background-color: lightgoldenrodyellow;
}

Menggunakan svh memastikan mod kekal boleh digunakan walaupun apabila papan kekunci pada skrin mengurangkan ketinggian port pandangan.

Kaki Melekat

div {
  width: 100vw; /* Full viewport width */
  background-color: lightpink;
}

Pengaki melekit yang mengekalkan saiznya pada pelbagai peranti.

6. Menggabungkan Unit untuk Fleksibiliti Maksimum

Anda boleh mencampur dan memadankan unit ini untuk reka bentuk yang lebih adaptif. Contohnya:

.hero {
  height: 100dvh; /* Ensures the hero fits the visible viewport */
  width: 100vw;
  background: url('hero.jpg') no-repeat center center/cover;
}

Pendekatan ini memastikan reka bentuk menyesuaikan diri dengan semua kemungkinan senario port pandangan.

7. Sokongan Penyemak Imbas

Walaupun vh dan vw disokong secara meluas merentas penyemak imbas, dvh, lvh dan svh adalah tambahan yang lebih baharu. Pastikan anda menyemak keserasian penyemak imbas dan memberikan sandaran untuk penyemak imbas yang lebih lama.

Contoh Fallback:

.modal {
  height: 100svh; /* Accounts for the smallest viewport height */
  width: 100vw;
  overflow-y: auto; /* Allows scrolling if needed */
  background-color: white;
}

8. Kesimpulan

Unit port pandangan CSS seperti vh, vw, dvh, lvh dan svh ialah alat yang berkuasa untuk mencipta reka bentuk web yang responsif dan boleh disesuaikan. Walaupun vh dan vw mengendalikan kebanyakan kes, unit dvh, lvh dan svh yang lebih baharu menangani had, terutamanya pada peranti mudah alih. Dengan memahami dan memanfaatkan unit ini, pembangun aplikasi mudah alih boleh menghasilkan reka bentuk yang lancar dan mesra pengguna yang berfungsi merentas semua peranti dan senario.

Atas ialah kandungan terperinci Unit Pandangan CSS: CSS *vh (dvh, lvh, svh) dan *vw unit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!