Apakah perbezaan antara vw dan vh dalam css-tutorial css-php.cn

Apakah perbezaan antara vw dan vh dalam css

WBOY

Lepaskan： 2021-12-10 17:53:57

asal

16920 orang telah melayarinya

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.

Apakah perbezaan antara vw dan vh dalam css

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
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.

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>

Salin selepas log masuk

)

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!