Peranan vw dan vh dalam css

Unit viewport vw dan vh digunakan untuk menetapkan saiz dan kedudukan elemen berdasarkan saiz viewport tetingkap penyemak imbas, memberikan responsif dan konsisten serta kemudahan penggunaan.

Peranan vw dan vh dalam CSS

Jawapan ringkas:
vw dan vh ialah unit viewport dalam CSS dan digunakan untuk menetapkan saiz dan kedudukan elemen saiz berdasarkan viewport tetingkap pelayar.

Penjelasan terperinci:

Apakah unit viewport?
Unit viewport ialah unit CSS yang mengira saiz dan kedudukan elemen berdasarkan dimensi viewport penyemak imbas, tanpa mengira saiz peranti atau skrin.

vw dan vh

• vw (lebar viewport): mewakili peratusan lebar viewport (arah mendatar). Sebagai contoh, 1vw adalah sama dengan 1% daripada lebar viewport.
• vh (ketinggian viewport): mewakili peratusan ketinggian viewport (arah menegak). Sebagai contoh, 1vh adalah bersamaan dengan 1% daripada ketinggian viewport. . Contohnya:

<code class="css">.container {
  width: 50vw;
  height: 50vh;
}</code>

Kod CSS ini mencipta elemen kontena dengan lebar separuh daripada lebar port pandangan dan ketinggian separuh daripada ketinggian port pandangan.

Kebaikan:

Kebaikan menggunakan vw dan vh termasuk:

Responsif: Laraskan saiz dan kedudukan elemen berdasarkan saiz tetingkap penyemak imbas, memberikan reka bentuk responsif.

Ketekalan:
• Kekalkan antara muka pengguna yang konsisten merentas pelbagai peranti dan saiz skrin.
Kesederhanaan:
• Mudah digunakan, tiada pengiraan rumit atau pertanyaan media diperlukan. . induk Dipengaruhi oleh nilai vw/vh unsur.
Unit Campuran:
• Elakkan mencampurkan vw/vh dengan jenis unit lain seperti peratusan atau piksel kerana ini boleh menyebabkan reka letak yang tidak dijangka.
Sokongan Penyemak Imbas:

Kebanyakan penyemak imbas moden menyokong vw dan vh, tetapi polyfill mungkin diperlukan dalam penyemak imbas lama untuk keserasian.

Atas ialah kandungan terperinci Peranan vw dan vh dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!