CSS Academy · Pelajaran

Unit Ruang Pandang: vw, vh, dvh

Saizkan unsur berbanding ruang pandang pelayar menggunakan unit vw, vh dan dvh moden.

Pelajaran 3 daripada 413 langkah

Unit Ruang Pandang: vw, vh, dvh ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah Unit Ruang Pandang?

Unit ruang pandang adalah relatif kepada saiz ruang pandang pelayar (kawasan tetingkap pelayar yang kelihatan). Unit ini membolehkan susun atur dan tipografi yang berskala mengikut ruang skrin yang tersedia.

vw — Lebar Ruang Pandang

1vw = 1% daripada lebar ruang pandang. 100vw memenuhi keseluruhan lebar ruang pandang. Unit ini berguna untuk elemen lebar penuh tanpa kerumitan peratusan.

<div class="hero"></div>

vh — Tinggi Ruang Pandang

1vh = 1% daripada tinggi ruang pandang. 100vh memenuhi keseluruhan tinggi ruang pandang. Unit ini biasanya digunakan untuk seksyen utama dan modal skrin penuh.

<div class="fullscreen">100vh fills the viewport height</div>

Masalah 100vh pada Mudah Alih

Pada pelayar mudah alih, tinggi ruang pandang berubah apabila antara muka pelayar (bar alamat) dipaparkan atau disembunyikan semasa menatal. 100vh boleh memasukkan atau mengecualikan antara muka pelayar secara tidak konsisten, lalu menyebabkan sebahagian kandungan tersembunyi.

dvh — Tinggi Ruang Pandang Dinamik

dvh (tinggi ruang pandang dinamik) dikemas kini secara dinamik untuk menggambarkan tinggi sebenar yang kelihatan selepas antara muka pelayar diselaraskan. Unit ini menyelesaikan masalah 100vh pada mudah alih.

<div class="mobile-hero">Dynamic viewport height (100dvh)</div>

svh dan lvh

CSS turut menyediakan svh (tinggi ruang pandang kecil — sentiasa tidak termasuk antara muka pelayar) dan lvh (tinggi ruang pandang besar — seolah-olah antara muka disembunyikan). Unit ini membolehkan kawalan terperinci terhadap tingkah laku ruang pandang mudah alih.

Tipografi Anjal dengan vw

Penggunaan vw untuk saiz fon menghasilkan teks yang berskala mengikut skrin:

<h1>Fluid Heading</h1>

Had Lebar Ruang Pandang

100vw turut memasukkan lebar bar tatal pada komputer meja. Hal ini menyebabkan limpahan mendatar jika digunakan secara cuai. Utamakan width: 100% pada elemen blok dan gunakan vw untuk kes tertentu.

vmin dan vmax

1vmin = 1% daripada dimensi ruang pandang yang lebih kecil (lebar atau tinggi). 1vmax = 1% daripada dimensi yang lebih besar. Unit ini berguna untuk bekas segi empat sama yang menyesuaikan diri dengan perubahan orientasi.

<div class="square"></div>

svw, lvw, dvw — Varian Lebar

Seperti varian ketinggian, CSS menyediakan svw, lvw dan dvw untuk lebar. Varian dinamik (dvw, dvh) paling berguna pada mudah alih.

Corak Praktikal

Corak unit ruang pandang yang biasa:

min-height: 100dvh — seksyen skrin penuh yang selamat untuk mudah alih
height: 100svh — panel antara muka pengguna tetap
font-size: clamp(1rem, 2.5vw, 2rem) — tajuk yang anjal
width: min(800px, 90vw) — bekas lebar selamat

Semakan Pantas

Mengapakah dvh lebih sesuai berbanding vh untuk seksyen mudah alih skrin penuh?

Jawab dalam pelajaran interaktif

Imbas Kembali

vw dan vh ialah 1% daripada lebar atau tinggi ruang pandang. Pada mudah alih, vh tidak boleh dipercayai kerana antara muka pelayar. Gunakan dvh untuk susun atur skrin penuh yang dinamik dan tepat pada mudah alih. vmin dan vmax bertindak balas terhadap dimensi ruang pandang yang lebih kecil atau lebih besar.

Percuma untuk bermula

Pelajari CSS dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Unit Ruang Pandang: vw, vh, dvh” percuma?

Ya — teks penuh “Unit Ruang Pandang: vw, vh, dvh” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Unit Ruang Pandang: vw, vh, dvh”?

Saizkan unsur berbanding ruang pandang pelayar menggunakan unit vw, vh dan dvh moden. Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Unit Ruang Pandang: vw, vh, dvh” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy