Panduan kepada CSS Viewport Units vw, vh, vmin, vmax

Tempoh peratusan-peratusan, atau unit paparan kerana mereka lebih sering dirujuk, adalah unit CSS responsif yang membolehkan anda untuk menentukan dimensi sebagai peratusan lebar atau panjang viewport. Unit paparan boleh sangat berguna dalam kes di mana unit CSS responsif lain, seperti peratusan, adalah sukar untuk membuat kerja.

Walaupun Dokumentasi W3C pada unit viewport mengandungi segala sesuatu yang boleh dimasukkan ke dalam teori, ia tidak terlalu verbose. Oleh itu, dalam artikel ini, kita akan melihat bagaimana unit CSS ini kerja dalam amalan.

Ketinggian paparan (vh) & lebar paparan (vw)

W3C mentakrifkan viewport sebagai “saiz blok yang mengandungi awal”. Dengan kata lain, viewport adalah kawasan terkandung dalam tetingkap penyemak imbas atau mana-mana kawasan tontonan lain pada skrin.

The vw dan vh unit berdiri untuk peratusan lebar dan ketinggian viewport sebenar. Mereka boleh mengambil nilai antara 0 dan 100 mengikut peraturan berikut:

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

Perbezaan dengan unit peratusan

Jadi, bagaimanakah unit viewport berbeza daripada unit peratusan? Unit peratusan mewarisi saiz elemen ibu bapa mereka manakala unit viewport tidak. Unit paparan sentiasa dikira sebagai peratusan saiz paparan. Hasilnya, elemen yang ditakrifkan oleh unit paparan boleh melebihi saiz induknya.

Contoh: Bahagian skrin penuh

Bahagian skrin penuh adalah mungkin kes penggunaan unit viewport yang paling banyak diketahui.

The HTML agak mudah; kita hanya ada tiga bahagian di bawah satu sama lain dan kami mahu setiap mereka meliputi seluruh skrin (tetapi tidak lebih).

Dalam CSS, kami gunakan 100vh sebagai ketinggian nilai dan 100% sebagai lebar. Kami tidak menggunakannya vw unit di sini secara lalai, scrollbar juga ditambah kepada saiz paparan. Jadi, jika kita menggunakannya lebar: 100vw; memerintah a bar skru mendatar akan muncul di bahagian bawah tetingkap penyemak imbas.

 * margin: 0; padding: 0;  seksyen background-size: cover; kedudukan latar belakang: pusat; lebar: 100%; ketinggian: 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, anda boleh melihatnya vh adalah benar unit responsif.

Menurut dokumen W3C, yang disebutkan di atas Isu gelung huluan boleh diselesaikan dengan menambah limpahan: auto; memerintah ke elemen akar. Penyelesaian ini hanya berfungsi sebahagiannya, walaupun. Bilah tatal mendatar, sesungguhnya, hilang tetapi lebar adalah masih dikira berdasarkan lebar paparan (bar sisi disertakan), jadi unsur-unsur akan sedikit lebih besar daripada yang seharusnya.

Saya akan berkata, saya tidak akan berani menggunakannya vw unit pada saiz skrin penuh kerana sebab ini. Kami tidak memerlukannya, kerana lebar: 100%; peraturan berfungsi dengan sempurna. Dengan susun atur skrin penuh, cabaran sebenar selalu menjadi cara menetapkan nilai ketinggian yang betul dan juga vh unit memberikan penyelesaian cemerlang untuk itu.

Kes penggunaan lain

Sekiranya anda berminat kes penggunaan lain vw dan vh Lullabot mempunyai artikel hebat yang menyenaraikan a segelintir contoh kehidupan sebenar (dengan demo Codepen), seperti:

• Kad nisbah tetap.
• Menjaga elemen lebih pendek daripada skrin.
• Teks penskalaan.
• Memecah keluar bekas.

Opera.dev juga mempunyai tutorial ringkas tentang bagaimana anda boleh mengambil leverage vw unit dalam mewujudkan tipografi responsif.

Anda tidak boleh menggunakan unit paparan sahaja lebar dan ketinggian hartanah tetapi pada mana-mana yang lain. Sebagai contoh, anda boleh menetapkan saiz padding dan margin menggunakan vw dan vh unit juga.

Min pemandangan (vmin) & maxportport (vmax)

The vmin dan vmax unit membolehkan anda mengakses saiz bahagian yang lebih kecil atau lebih besar dari viewport, menurut peraturan berikut:

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

Jadi, dalam hal a orientasi potret, 100vmin adalah sama dengan 100vw, sebagai viewport adalah lebih kecil secara mendatar daripada menegak. Atas alasan yang sama, 100vmax akan sama dengan 100vh.

Begitu juga, dalam hal a orientasi landskap, 100vmin adalah sama dengan 100vh, sebagai viewport adalah lebih kecil secara menegak daripada mendatar. Dan tentu saja, 100vmax akan sama dengan 100vw di sini.

Contoh: Buat teks pahlawan yang boleh dibaca pada setiap skrin

The vmin dan vmax unit adalah jauh lebih dikenali daripada vw dan vh. Walau bagaimanapun, mereka boleh digunakan dengan baik sebagai ganti orientasi @media pertanyaan. Contohnya, vmin dan vmax boleh berguna apabila anda mempunyai elemen yang kelihatan aneh pada nisbah aspek yang berlainan.

Kod Baru mempunyai tutorial hebat di mana mereka membincangkan bagaimana anda boleh menyimpan teks pahlawan yang boleh dibaca pada setiap skrin, menggunakan vmin unit. Teks pahlawan mudah dilihat terlalu kecil pada mudah alih dan terlalu besar pada monitor besar.

Inilah idea utama penyelesaian mereka:

 h1 font-size: 20vmin; font-family: Avenir, sans-serif; font-weight: 900; teks-align: center;  

Dalam demo Codepen, anda boleh menyemak bagaimana vmin menyelesaikan masalah pembacaan teks pahlawan. Akses “Halaman penuh” lihat pada Codepen, kemudian ubah saiz tetingkap pelayar anda baik secara melintang dan menegak untuk melihat bagaimana perubahan teks pahlawan.

Sokongan penyemak imbas

Seperti yang dapat anda lihat pada carta CanIUse di bawah, Sokongan penyemak imbas adalah agak baik untuk unit viewport. Walau bagaimanapun, perlu diingat bahawa beberapa versi IE dan Edge tidak menyokong vmax. Juga, iOS 6 dan 7 mempunyai masalah dengan vh unit, yang telah ditetapkan dalam iOS 8.