Panduan untuk Unit-unit Tampilan CSS vw, vh, vmin, vmax

Panjang viewport-persentase, atau unit viewport karena lebih sering disebut, adalah unit CSS responsif yang memungkinkan Anda untuk menentukan dimensi sebagai persentase dari lebar atau panjang viewport. Unit viewport bisa sangat berguna dalam kasus di mana unit CSS responsif lainnya, seperti persentase, adalah sulit untuk bekerja.

Meskipun Dokumentasi W3C pada unit viewport berisi segala sesuatu yang dapat dimasukkan ke dalam teori, itu tidak terlalu bertele-tele. Jadi, dalam artikel ini, kita akan melihat bagaimana unit CSS ini bekerja dalam praktik.

Tinggi viewport (vh) & lebar viewport (ay)

W3C mendefinisikan viewport sebagai “ukuran blok berisi awal”. Dengan kata lain, viewport adalah area terkandung dalam jendela browser atau area tampilan lainnya di layar.

Itu ay dan vh unit berdiri untuk persentase lebar dan tinggi viewport yang sebenarnya. Mereka dapat mengambil nilai antara 0 dan 100 sesuai dengan aturan berikut:

 100vw = 100% lebar viewport 1vw = 1% dari lebar viewport 100vh = 100% tinggi viewport 1vh = 1% dari tinggi viewport 

Perbedaan ke unit persentase

Jadi, bagaimana unit viewport berbeda dari unit persentase? Persentase unit mewarisi ukuran elemen induknya sedangkan unit viewport tidak. Unit viewport selalu dihitung sebagai persentase ukuran viewport. Akibatnya, elemen yang ditentukan oleh unit viewport dapat melebihi ukuran induknya.

Contoh: Bagian layar penuh

Bagian layar penuh mungkin merupakan kasus penggunaan yang paling banyak diketahui dari unit viewport.

Itu HTML cukup sederhana; kita hanya punya tiga bagian di bawah satu sama lain dan kami ingin masing-masing dari mereka tutupi seluruh layar (tapi tidak lebih).

Dalam CSS, kami menggunakan 100vh sebagai tinggi nilai dan 100% sebagai lebar. Kami tidak menggunakan ay Unit di sini sebagai default, scrollbar juga ditambahkan ke ukuran viewport. Jadi, jika kita menggunakan lebar: 100vw; aturan a scrollbar horisontal akan muncul di jendela bagian bawah jendela browser.

 * margin: 0; bantalan: 0;  bagian ukuran latar: penutup; posisi latar belakang: tengah; lebar: 100%; tinggi: 100vh;  .section-1 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg');  .section-2 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg');  .section-3 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');  

Pada demo gif di bawah ini, Anda dapat melihatnya vh aku s benar-benar unit yang responsif.

Menurut dokumen W3C, yang disebutkan di atas masalah scrollbar horisontal dapat diselesaikan dengan menambahkan overflow: otomatis; aturan ke elemen root. Solusi ini hanya berfungsi sebagian, meskipun. Scrollbar horizontal, memang, menghilang tetapi lebar aku s masih dihitung berdasarkan lebar viewport (termasuk bilah sisi), sehingga elemen akan sedikit lebih besar dari yang seharusnya.

Saya akan mengatakan, saya tidak akan berani menggunakan ay unit aktif ukuran elemen layar penuh karena alasan ini. Kami bahkan tidak membutuhkannya, sebagai lebar: 100%; aturan bekerja dengan sempurna. Dengan tata letak layar penuh, tantangan sebenarnya adalah bagaimana caranya atur nilai ketinggian yang tepat dan vh Unit memberikan solusi yang brilian untuk itu.

Kasus penggunaan lainnya

Jika Anda tertarik kasing lainnya ay dan vh Lullabot memiliki artikel bagus yang berisi daftar a beberapa contoh kehidupan nyata (dengan demo Codepen), seperti:

• Kartu dengan rasio tetap.
• Menjaga elemen lebih pendek dari layar.
• Penskalaan teks.
• Keluar dari wadah.

Opera.dev juga memiliki tutorial singkat tentang bagaimana Anda dapat memanfaatkan ay unit dalam membuat tipografi responsif.

Anda tidak bisa hanya menggunakan unit viewport di jendela lebar dan tinggi properti tetapi pada yang lain. Misalnya, Anda bisa atur ukuran paddings dan margin menggunakan ay dan vh unit juga.

Viewport min (vmin) & viewport maks (vmax)

Itu vmin dan vmax unit memungkinkan Anda untuk mengakses ukuran sisi yang lebih kecil atau lebih besar viewport, sesuai dengan aturan berikut:

 100vmin = 100vw atau 100vh, mana yang lebih kecil 1vmin = 1vw atau 1vh, mana yang lebih kecil 100vmax = 100vw atau 100vh, mana yang lebih besar 1vmax = 1vw atau 1vh, mana yang lebih besar 

Jadi, dalam kasus a orientasi tegak, 100 menit adalah sama dengan 100vw, seperti viewport lebih kecil secara horizontal daripada vertikal. Untuk alasan yang sama, 100vmax akan sama dengan 100vh.

Demikian pula, dalam kasus a orientasi lanskap, 100 menit adalah sama dengan 100vh, seperti viewport lebih kecil secara vertikal daripada horizontal. Dan tentu saja, 100vmax akan sama dengan 100vw sini.

Contoh: Jadikan teks pahlawan dapat dibaca di setiap layar

Itu vmin dan vmax unit jauh lebih dikenal daripada ay dan vh. Namun, mereka dapat digunakan sebagai pengganti orientasi @media pertanyaan. Contohnya, vmin dan vmax dapat berguna ketika Anda memiliki elemen yang mungkin terlihat aneh pada rasio aspek yang berbeda.

Kode Baru memiliki tutorial yang bagus untuk membahas bagaimana Anda dapat melakukannya membuat teks pahlawan dapat dibaca di setiap layar, menggunakan vmin satuan. Teks pahlawan cenderung untuk dilihat terlalu kecil di ponsel dan terlalu besar di monitor besar.

Inilah ide utama solusi mereka:

 h1 ukuran font: 20vmin; font-family: Avenir, sans-serif; font-berat: 900; perataan teks: tengah;  

Dalam demo Codepen, Anda dapat melihat caranya vmin memecahkan masalah keterbacaan teks pahlawan. Akses “Halaman penuh” lihat di Codepen, lalu mengubah ukuran jendela browser Anda baik secara horizontal maupun vertikal untuk melihat bagaimana teks pahlawan berubah.

Dukungan browser

Seperti yang Anda lihat pada grafik CanIUse di bawah ini, dukungan browser relatif baik untuk unit viewport. Namun, perlu diingat bahwa beberapa versi IE dan Edge tidak mendukung vmax. Juga, iOS 6 dan 7 memiliki masalah dengan vh satuan, yang diperbaiki di iOS 8.