Unit ketinggian dan lebar viewport dalam CSS moden

Memandangkan saya terus menemui pangkalan kod CSS dan definisi tema yang semata-mata menggunakan unit port pandangan tradisional vh dan vw, saya terfikir untuk menulis catatan blog tentang alatan berkuasa yang kami sediakan pada masa kini, yang boleh menjadikan hidup kita lebih mudah dan kod CSS kita lebih baik.

Unit pandangan lama yang bagus

Pendek cerita, selama bertahun-tahun kami telah menggunakan vh dan vw untuk mentakrifkan sesuatu sebagai peratusan ketinggian dan lebar port pandangan awal. Contohnya, jika kami ingin mengisi keseluruhan port pandangan semua peranti dengan hijau, kami boleh melakukan perkara berikut:

.big-fat-green-element {
  background: green;
  height: 100vh;
  width: 100vw;
}

..dan ini mungkin akan berjaya. Tetapi ini hanya akan berfungsi dengan pasti sehingga atas apa jua sebab, sesuatu menjejaskan ruang pandang yang boleh dilihat. Sebagai contoh, kebanyakan penyemak imbas mudah alih moden akan menyembunyikan sebahagian atau semua tajuk dan bar alamat sebaik sahaja pengguna mula menatal halaman, turut menjejaskan ruang pandang dan menjadikan elemen hijau gemuk besar kami kurang besar.

Unit pandangan moden

Pada masa kini dan dalam spesifikasi CSS terkini, kami boleh menggunakan apa yang dipanggil Unit Port Pandang Besar, Kecil dan Dinamik dengan selamat.

Unit Viewport Besar

Unit peratusan port pandang yang besar (lv*) dan unit peratusan port pandangan lalai (v*) ditakrifkan berkenaan dengan saiz port pandangan yang besar: bersaiz port pandang dengan mengandaikan mana-mana antara muka UA yang dikembangkan secara dinamik dan ditarik balik untuk ditarik balik.

Pada asasnya, lvh dan lvw memberi kami unit yang boleh kami gunakan sebagai peratusan berhubung dengan port pandangan apabila UI penyemak imbas adalah yang terkecil dan kandungan tapak web berada pada keadaan terbesarnya. lvh dan lvw sebenarnya akan memberikan kita gelagat yang sama dengan unit vh dan vw tradisional.

Contoh: Contoh penggunaan unit lvh dan lvw adalah untuk menentukan ketinggian dan lebar elemen yang sepatutnya bertindak sebagai latar belakang halaman penuh.

/* Full-page background using largest available viewport height and width, regardless of other elements or browser UI state. */
.full-page-background {
  height: 100lvh;
  background: #f51;
  position: fixed;
  top: 0;
  left: 0;
  width: 100lvw;
  z-index: -1; /* Ensure it stays behind other content */
}

Unit Viewport Kecil

Unit peratusan port pandang kecil (sv*) ditakrifkan berkenaan dengan saiz port pandang kecil: bersaiz port pandang dengan mengandaikan mana-mana antara muka UA yang dikembangkan secara dinamik dan ditarik balik untuk dikembangkan.

Dalam erti kata lain, svh dan svw memberi kami unit yang boleh kami gunakan untuk mengisi skrin apabila UI penyemak imbas berada pada keadaan terbesarnya dan kandungan tapak web berada pada keadaan terkecilnya.

Contoh: Contoh yang baik untuk menggunakan unit svh ialah untuk menentukan ketinggian bar bawah tetap atau pengepala statik.

/* Header with static height, 10% of the smallest available viewport 
 * e.g. when the browser UI is visible on mobile devices */
.header {
  height: 10svh;
  background-color: #642;
}

Unit Pandangan Dinamik

Unit peratusan port pandangan dinamik (dv*) ditakrifkan berkenaan dengan saiz port pandangan dinamik: saiz port pandangan dengan pertimbangan dinamik mana-mana antara muka UA yang dikembangkan dan ditarik balik secara dinamik.

Saiz unit peratusan port pandangan dinamik tidak stabil walaupun port pandangan itu sendiri tidak berubah. Menggunakan unit ini boleh menyebabkan kandungan berubah saiz cth. semasa pengguna menatal halaman. Bergantung pada penggunaan, ini boleh mengganggu pengguna dan/atau mahal dari segi prestasi.

Walaupun unit dvh & dvw mungkin kedengaran ideal, kaveat yang dinyatakan dalam definisi di atas dan beberapa isu yang saya hadapi semasa menggunakannya dalam elemen menatal, membuatkan saya membuat kesimpulan bahawa kita hanya perlu menggunakannya dalam situasi yang sangat khusus.

Contoh 1: Contoh penggunaan dvh adalah untuk menentukan ketinggian elemen kandungan yang harus dilaraskan mengikut perubahan port pandangan.

/* Main content adjusts dynamically. 
 * Since we used dvh the element height will align with the actual viewport and adapt to its changes */
.adjustable-content {
  background-color: #895;
  height: calc(100dvh - 10svh); /* Adjust height considering header */
  overflow: auto;
  padding: 10px;
}

Contoh 2: Saya mengalami kes ini minggu lepas apabila pepijat dilaporkan tentang borang yang mengikut reka bentuk, penatalan dilumpuhkan manakala borang akan menduduki ketinggian dan lebar penuh port pandangan. Pepijat berlaku apabila pengguna mudah alih akan memfokus pada input dan papan kekunci peranti akan dipaparkan. Kemudian susun atur borang akan pecah. Penyelesaiannya ialah menggunakan dvh dan bukannya vh untuk definisi ketinggiannya.

Codepen dengan Contoh

Akhirnya di sini ialah pen kod di mana anda boleh melihat unit port pandang moden sedang beraksi. Selamat mencuba!

Atas ialah kandungan terperinci Unit ketinggian dan lebar viewport dalam CSS moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!