Rumah > Artikel > hujung hadapan web > Apakah perbezaan antara vw dan vh dalam css
Apakah perbezaan antara vw dan vh dalam css
- WBOYasal
- 2021-12-10 17:53:5716945semak imbas
Perbezaan antara vw dan vh dalam css: unit vw boleh menukar saiz secara automatik mengikut lebar tetingkap, "1vw" ialah "1%" daripada lebar tetingkap secara automatik; saiz mengikut ketinggian tingkap, " 1vh" ialah "1%" daripada ketinggian tingkap.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Apakah perbezaan antara vw dan vh dalam css?
Dalam css, perbezaan antara vw dan vh ialah:
Unit vw secara automatik boleh menukar saiz mengikut lebar tingkap, 1vw ialah 1% daripada lebar tingkap; tukar saiz mengikut ketinggian tetingkap, 1vh ialah 1% daripada ketinggian tetingkap; kepada unit panjang. Dalam penyemak imbas, 1 vw = lebar viewport/100
Menurut ciri ini, vw boleh membantu kami melaksanakan reka letak penyesuaian mudah alih Kelebihannya ialah apa yang anda lihat adalah apa yang anda perolehi, malah lebih baik daripada rem, kerana ia tidak digunakan sama sekali. Adalah disyorkan untuk menggunakannya dengan bahasa prapemprosesan CSSseperti sass dan kurang, kerana ia boleh menentukan pembolehubah dan fungsi, yang akan memberikan bantuan besar dalam menggunakan vw.
vm, vh, vmin, vmax ialah unit tetingkap dan unit relatif. Ia tidak berkaitan dengan nod induk atau nod akar halaman. Ia ditentukan oleh saiz port pandangan Unit ialah 1, yang bermaksud seperti 1%. Port pandangan ialah kawasan penyemak imbas anda yang sebenarnya memaparkan kandungan—dengan kata lain, pelayar web anda tanpa bar alat dan butang.
Penerangan khusus adalah seperti berikut:
vw: peratusan lebar tingkap (1vw bermakna lebar tingkap ialah 1%)
vh: peratusan ketinggian tingkap
vmin: Ambil nilai yang lebih kecil bagi Vw dan Vh semasa
vmax: Ambil nilai yang lebih besar bagi Vw dan Vh semasa
Jumlah ketinggian vh dan vw relatif kepada Lebar port pandangan, 1vh adalah sama dengan 1/100 ketinggian port pandangan, 1vw adalah sama dengan lebar port pandangan Contohnya: ketinggian pelayar ialah 900px, lebar ialah 750px, 1 vh = 900px/100 = 9 px, 1vw = 750px/100 = 7.5 px , adalah mudah untuk merealisasikan kotak dengan ketinggian yang sama dengan skrin.
Contoh adalah seperti berikut:
Hasil keluaran:(Belajar perkongsian video:
tutorial video css<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>vh_CSS参考手册_web前端开发参考手册系列</title>
<style>
.p1{font-size:5vh;}
.p2{font-size:5vw;}
</style>
</head>
<body>
<p class="p1">相对于viewport高度大小的文字</p>
<p class="p2">相对于viewport宽度大小的文字</p>
</body>
</html> )Atas ialah kandungan terperinci Apakah perbezaan antara vw dan vh dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!