Rumah > Artikel > hujung hadapan web > Apakah maksud vh dalam css3
Dalam CSS3, vh bermaksud "peratusan ketinggian tetingkap", iaitu unit tetingkap dan unit relatif vh adalah relatif kepada ketinggian tetingkap, dan tetingkap ialah kawasan yang boleh dilihat pelanggan pelayar, tetingkap dibahagikan kepada 100 unit, dan saiz 1vh ialah seperseratus daripada ketinggian tetingkap.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
vh adalah relatif kepada ketinggian port pandangan (port pandangan 1vw bersamaan dengan 1/100 lebar port pandangan).
Pada klien, port pandangan merujuk kepada kawasan kelihatan pelayar; viewport), Ideal Viewport (ideal viewport). Ia merujuk kepada Layout Viewport "Viewport" merujuk kepada saiz kawasan yang boleh dilihat di dalam penyemak imbas, iaitu saiz window.innerWidth/window.innerHeight, tidak termasuk saiz kawasan penyemak imbas bar tajuk bar tugas dan bar alat bawah.
Unit vh boleh menukar saiz secara automatik mengikut ketinggian tetingkap 1vh ialah 1% daripada ketinggian tetingkap
vw dan vh adalah relatif kepada viewport, yang boleh juga dipanggil viewport, ufuk atau lebar dan ketinggian julat yang boleh dilihat).
Pengetahuan lanjutan:
vw: peratusan lebar viewport (1vw bersamaan dengan 1% lebar viewport)
vh : viewport Peratusan ketinggian viewport (1vh bersamaan dengan 1% ketinggian viewport)
vmin: Pilih yang terkecil antara vw dan vh
vmax: Pilih yang terbesar antara vw dan vh
vw, vh adalah berdasarkan port pandang, bukan elemen induk. 1vw bersamaan dengan 1/100 daripada lebar viewport, 1vh adalah sama dengan 1/100 daripada ketinggian viewport, contohnya:
Ketinggian penyemak imbas ialah 950px, lebarnya ialah 1920px, 1vh = 950px/100 = 9.5 px, 1vw = 1920px/ 100 =19.2 px
Perbezaan antara vw, vh dan %% ialah nisbah yang ditetapkan relatif kepada saiz induk elemen, vw vh ditentukan oleh saiz viewport
vw dan vh boleh terus mendapatkan ketinggian, tetapi % tidak boleh memperoleh ketinggian kawasan yang boleh dilihat jika ketinggian badan tidak ditetapkan.
(Mempelajari perkongsian video:
tutorial video cssAtas ialah kandungan terperinci Apakah maksud vh dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!